.ft-viewport-shell { display: flow-root; min-height: 100vh; }
.ft-viewport-shell .hight-600-scroll.ft-viewport-panel {
  max-height: var(--ft-panel-height, 75vh);
  overflow-y: auto;
}
@media (max-width: 767px) {
  .ft-viewport-shell .hight-600-scroll.ft-viewport-panel { max-height: none; height: auto; overflow-y: visible; }
}

body {
  background: white;
}

.pl-70 {
  padding-left: 70px !important;
}

.bg-primary-dark {
  background-color: #17a2b8;
}

#location-table, #asset-table, #po-table {
  border: 1px solid #17a2b8;
  border-radius: 10px;
}

/*Theme the header*/
#location-table .tabulator-header, #asset-table .tabulator-header, #po-table .tabulator-header {
  background-color: #17a2b8;
  color: #fff;
  border: none;
}

.tabulator .tabulator-header {
  padding-left: 0;
  margin-bottom: 2px;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
  background-color: #666;
}

.tabulator .tabulator-header .tabulator-col {
  background-color: #17a2b8;
  height: 50px;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
  padding: 10px;
}

.tabulator-row {
  font-size: 14px;
}

.tabulator-row .tabulator-cell:first-child {
  border-left: 10px solid #17a2b8;
}

.tabulator-row:nth-child(2n) .tabulator-cell:first-child {
  border-left: 10px solid rgba(23, 162, 184, 0.7);
}

.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols {
  border-top: none;
  margin-right: 0;
}

.disp-text-xl {
  font-size: 100px;
  background: -webkit-linear-gradient(30deg, #17a2b8 20%, rgba(23, 162, 184, 0.5));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h3 {
  margin: 0 !important;
  padding: 0 !important;
}

.shadow-md-light {
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2);
}

.container-rounded-white {
  padding: 20px;
  border-radius: 10px;
  background: #fff;
  margin-top: 80px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.container-md {
  padding: 20px 20px;
  border-radius: 10px;
  background: #fff;
  margin-top: 80px;
  max-width: 1230px;
  height: 88vh;
  overflow-y: auto;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.container-md::-webkit-scrollbar {
  width: 7px;
}
.container-md {
  /* Track */
}
.container-md::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.container-md {
  /* Handle */
}
.container-md::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 0 20px 20px 0;
}
.container-md {
  /* Handle on hover */
}
.container-md::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.centered-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.card:hover {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.para-sm {
  font-size: 14px;
  font-weight: 300;
  white-space: nowrap;
}

.form-ctrl {
  display: inline-block;
  width: auto;
}

.form-control {
  background: transparent;
  border: 1px solid black;
}

.text-primary-dark {
  color: #17a2b8;
}

td {
  font-size: 12px;
}

.disabled-input {
  border: none;
  background: #fff;
}

.edit-location {
  background: #f2f2f2;
  position: relative;
}

.add-fields {
  position: relative;
}

.bg-primary-light {
  background: rgba(23, 162, 184, 0.8);
  color: white;
}

.container-header {
  border-radius: 10px 10px 0 0;
}

.mw-100 {
  max-width: 100%;
  display: inline-block;
}

.hr-b-primary {
  border: 1px solid #17a2b8;
}

.list-item-selected {
  border: 2px solid green !important;
}

.list-item-exist {
  border: 1px solid grey !important;
  background: lightgray !important;
}
.list-item-exist > * {
  color: black !important;
}

.deselect, .list-item-selected {
  cursor: pointer;
}

.stat-indicator {
  padding: 0 5px;
  border-radius: 100px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.view-card-header {
  padding: 10px;
  background: rgba(23, 162, 184, 0.7);
}
.view-card-body {
  border-left: 1px solid #17a2b8;
  border-right: 1px solid #17a2b8;
  border-bottom: 1px solid #17a2b8;
}
.view-card-body .tag .active {
  position: relative;
  background: #fff;
  border-top: 1px solid #17a2b8;
  border-left: 1px solid #17a2b8;
  border-right: 1px solid #17a2b8;
  bottom: -1px;
  z-index: 2;
}

.bg-primary {
  background: #17a2b8 !important;
  padding: 0;
  margin: 0;
}

.border-bottom-primary {
  border-bottom: 1px solid #17a2b8 !important;
}

.get-started {
  width: 100%;
  height: 90vh;
  position: relative;
}
.get-started-display {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.get-started-button {
  position: absolute;
  bottom: 50px;
  right: 50px;
}

.tab-active {
  border-top: 1px solid #17a2b8;
  border-left: 1px solid #17a2b8;
  border-right: 1px solid #17a2b8;
  background: #fff;
  position: relative;
  top: 1px;
  z-index: 2;
}

.bb-primary {
  border-bottom: none;
}

.file-thumbnail {
  position: relative;
  padding: 0;
  z-index: 1;
}
.file-thumbnail .file-action {
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
}
.file-thumbnail:hover span {
  opacity: 0.3;
}
.file-thumbnail:hover .file-action {
  opacity: 1;
}

[type=checkbox] {
  position: static !important;
  left: 0 !important;
  opacity: 1 !important;
}

.field-bar {
  position: relative;
}
.field-bar-visible {
  position: relative;
  z-index: 2;
  background: #fff;
}
.field-bar-hidden {
  position: relative;
  width: 95%;
  margin: 0 auto;
  font-size: 0;
  visibility: hidden;
  z-index: 1;
  transform: translateY(-100%);
  transition: all 0.3s;
}
.field-bar:hover {
  margin-bottom: 10px;
}
.field-bar:hover .field-bar-visible {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}
.field-bar:hover .field-bar-hidden {
  visibility: visible;
  font-size: 14px;
  transform: translateY(-2%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.item-selected {
  background: rgba(23, 162, 184, 0.5);
}
.item-selected > * {
  color: white;
}

.navbar-brand {
  color: #01444a !important;
}

#emp-list {
  overflow-y: initial !important;
}

#emp-list {
  max-height: 95vh;
  overflow-y: auto;
}

.theme-red .bars {
  color: #17a2b8;
}

.menu-sm-scroll {
  overflow-y: scroll;
  height: 90vh;
  overscroll-behavior: contain;
}

.toggle {
  width: 15px;
  height: 15px;
  border: 1px solid #000;
  background: grey;
}

.toggle-btn {
  width: 50px;
  height: 25px;
  border-radius: 100px;
  border: 1px solid #17a2b8;
  display: inline-block;
  margin: 0;
  position: relative;
}
.toggle-btn::after {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 100px;
  background: #17a2b8;
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
}
.toggle-btn::before {
  content: "yes";
  font-size: 12px;
  color: #17a2b8;
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
}
.toggle-btn-completed {
  background: #17a2b8;
}
.toggle-btn-completed::after {
  left: unset;
  right: 2px;
  background: #fff;
}
.toggle-btn-completed::before {
  content: "";
}

.modal-header-sticky {
  position: sticky;
  top: 0;
  background: transparent;
}

.modal-content {
  max-height: 95vh;
  overflow-y: auto;
}

.loader2 {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.5);
  z-index: 1100;
}
.loader2 .loader-2 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.loader2 .loader-2 .loadingcogs {
  width: 128px;
  height: 100px;
}
.loader2 .loader-2 .loadingcogs:before, .loader2 .loader-2 .loadingcogs:after {
  display: inline-block;
  position: relative;
  font-family: FontAwesome;
  font-size: 64px;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  color: #17a2b8;
  content: "\f013";
  animation: spin 4s linear infinite;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.loader2 .loader-2 .loadingcogs:after {
  top: 30px;
  left: -12px;
  animation: spin 4s linear infinite reverse;
}
.loader2 .loader-2-text {
  font-size: 20px;
  font-weight: 500;
  color: #17a2b8;
}
.loader2 .loader-2-text span {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 100px;
  margin-left: 5px;
  background: #17a2b8;
}
.loader2 .loader-2-text span:first-child {
  animation: fade-in 1s -0.14s infinite ease-in-out both;
}
.loader2 .loader-2-text span:nth-child(2) {
  animation: fade-in 1s -0.07s infinite ease-in-out both;
}
.loader2 .loader-2-text span:last-child {
  animation: fade-in 1s 0s infinite ease-in-out both;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.message-hidden {
  display: none;
}

.message-error {
  font-size: 12px;
  padding: 0 5px;
  display: inline-block;
  background: #ff6161;
  color: white;
}

.modal {
  backdrop-filter: blur(1px);
}

.border-dark {
  border: 1px solid rgba(23, 162, 184, 0.5);
}

input {
  background: transparent;
  border: 1px solid #000;
  border-radius: 3px;
}

input[type=select] {
  background: transparent;
}

.table td {
  vertical-align: middle;
}

.table-borderless td, .table-borderless th {
  border: none;
  padding: 5px !important;
}
.table-borderless tbody tr td, .table-borderless tbody tr th {
  border: none;
}

.add-column-icon {
  position: relative;
  top: 3px;
}
.add-column-icon i {
  color: #17a2b8;
  font-size: 20px;
}
.add-column-icon:hover .columns-list {
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%);
}
.add-column-icon .columns-list {
  text-align: left;
  position: absolute;
  clip-path: polygon(0 0, 100% 0%, 100% 0, 0 0);
  width: 150px;
  max-width: 200px;
  max-height: 350px;
  right: 0;
  top: 20px;
  background: #17a2b8;
  z-index: 10;
  border-radius: 5px;
  padding: 20px 10px;
  transition: all 0.4s;
  overflow-y: scroll;
}
.add-column-icon .columns-list::-webkit-scrollbar {
  display: none;
}

.filter-stat:hover .filter-stat-heading, .filter-stat:hover .filter-type-heading, .filter-stat:hover .filter-time-heading, .filter-type:hover .filter-stat-heading, .filter-type:hover .filter-type-heading, .filter-type:hover .filter-time-heading, .filter-time:hover .filter-stat-heading, .filter-time:hover .filter-type-heading, .filter-time:hover .filter-time-heading {
  color: #17a2b8;
}
.filter-stat-opt, .filter-type-opt, .filter-time-opt {
  font-size: 10px;
  opacity: 1;
  transition: all 0.4s;
}

.filter-btn {
  display: inline-block;
  margin: 5px 2px;
  padding: 3px 5px;
  background: rgba(23, 162, 184, 0.1);
  font-size: 12px;
  color: rgb(90, 90, 90);
  border-radius: 3px;
}
.filter-btn-clicked {
  background: #17a2b8;
  color: white;
}
.filter-btn-clicked > [class$=secondary] {
  background: white;
  color: #000;
}

@media (min-width: 992px) {
  .work-list-filter-row {
    flex-wrap: nowrap;
  }
  .work-list-filter-controls {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    min-width: 0;
  }
  .work-list-filter-status {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .work-list-filter-status .filter-stat-opt {
    white-space: nowrap;
  }
}
@media (max-width: 991.98px) {
  .work-list-filter-status {
    justify-content: flex-start !important;
    margin-top: 8px;
  }
}

.border-y-dotted {
  border-top: 1px dotted black;
  border-bottom: 1px dotted black;
}

.table-headers {
  display: flex;
  background: #eee;
  padding: 10px;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
}

.custom-table-header, .custom-table-column {
  flex-basis: auto;
  width: 100%;
}

.shrink {
  transition: 0.4s all;
  transform: scale(0.3);
}

.table-row {
  display: flex;
  padding: 15px 10px;
  border-bottom: 1px solid #eee;
  font-size: 12px;
}
.table-row:hover {
  background: #eee;
}
.table-row:hover .shrink {
  transform: scale(1);
}

.data-card {
  background: #eee;
  padding: 10px;
  margin: 10px 0;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.data-card-header {
  font-weight: bold;
  color: #17a2b8;
}
.data-card-column {
  font-size: 12px;
}
.data-card:hover {
  background: #fff;
}
.data-card:hover .shrink {
  transform: scale(1);
}

.f-basis-20 {
  flex-basis: 20%;
}

.f-basis-30 {
  flex-basis: 30%;
}

.f-basis-40 {
  flex-basis: 40%;
}

.f-basis-60 {
  flex-basis: 60%;
}

.rounded-icon {
  background: #17a2b8;
  color: white;
  padding: 3px 4px;
  margin: 5px;
  border-radius: 3px;
}

.breakdown-asset {
  background: #ff6161 !important;
}
.breakdown-asset-header {
  background: rgba(255, 97, 97, 0.7);
}

.text-input-search {
  position: relative;
}
.text-input-search-result {
  position: absolute;
  padding: 5px 10px;
  border: 1px solid #ddd;
  width: 100%;
  background: #fff;
  max-height: 150px;
  top: 30px;
  left: 0;
  z-index: 2;
  overflow-y: auto;
}

.profile-dropdown {
  left: -200px;
}
.profile-dropdown .user-header {
  padding: 10px;
  background: #17a2b8;
}

.img-circle {
  border-radius: 100%;
}

.red-font {
  color: red;
}

.orange-font {
  color: orange;
}

.green-font {
  color: green;
}

.box-collapse-header {
  background: lightgray;
}

.box-open {
  background: #17a2b8;
  color: white;
}

.box-shadow-sm {
  box-shadow: 1px 1px 2px grey;
}

@media (max-width: 575.98px) {
  .pl-70 {
    padding-left: 10px !important;
  }
  .container-rounded-white {
    padding: 10px;
  }
  .profile-img {
    border-radius: 50%;
    margin-left: 10px;
  }
  .qr-code {
    margin-right: 10px;
    width: 100px;
    height: 100px;
    border-radius: 5px;
  }
  .info-col:first-child {
    order: 1;
  }
  .info-col:nth-child(2) {
    order: 3;
  }
  .info-col:last-child {
    order: 2;
  }
  .tab-active {
    border: none;
    position: relative;
    top: 1px;
    z-index: 2;
    background: #17a2b8;
    color: white !important;
  }
  .add-column-icon {
    top: 15px;
  }
  .add-column-icon i {
    font-size: 30px;
  }
}
.header-card, .kpi-strip-wrapper, .kpi-tile, .field-card, .tabs-card {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.badge-criticality-a {
  background: rgba(220, 38, 38, 0.12);
  color: #DC2626;
}

.badge-criticality-b {
  background: rgba(245, 158, 11, 0.15);
  color: rgb(187.1307086614, 120.4078740157, 7.6692913386);
}

.badge-criticality-c {
  background: #F3F4F6;
  color: #6B7280;
}

.badge-criticality-1 {
  background: rgba(220, 38, 38, 0.12);
  color: #DC2626;
}

.badge-criticality-2 {
  background: rgba(245, 158, 11, 0.15);
  color: rgb(187.1307086614, 120.4078740157, 7.6692913386);
}

.badge-criticality-3 {
  background: rgba(59, 130, 246, 0.12);
  color: #3B82F6;
}

.badge-criticality-4 {
  background: #F3F4F6;
  color: #6B7280;
}

.header-card {
  background: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-radius: 14px;
  padding: 22px 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.header-left {
  flex: 1;
  min-width: 0;
}

.header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}

.tag-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.id-tag {
  font-weight: 700;
  font-size: 14px;
  color: #1A2B3C;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  padding: 5px 11px;
  border-radius: 9999px;
  background: #F3F4F6;
  color: #374151;
  font-weight: 500;
}

.pill-criticality {
  font-weight: 600;
}

.pill-criticality .criticality-select {
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  padding: 0 2px;
  outline: none;
  cursor: pointer;
}

.pill.is-disabled {
  color: #D1D5DB;
  cursor: not-allowed;
}

.pill.is-disabled input[disabled] {
  cursor: not-allowed;
}

.asset-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
  position: relative;
}

.asset-avatar {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: linear-gradient(135deg, #17A2B8, rgb(19, 132, 150));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 20px;
  flex-shrink: 0;
}

.asset-avatar--photo {
  background: #F3F4F6;
  overflow: hidden;
}

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

.asset-avatar-edit {
  position: absolute;
  left: 32px;
  top: 32px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1A2B3C;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  cursor: pointer;
}

.asset-title {
  border: none;
  background: transparent;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: #1A2B3C;
  width: 100%;
}

.asset-title:disabled {
  color: #374151;
}

.asset-subtitle {
  color: #6B7280;
  font-size: 14px;
  margin: 2px 0 10px;
}

.asset-subtitle__sep {
  margin: 0 6px;
}

.asset-subtitle .is-disabled {
  color: #D1D5DB;
  cursor: not-allowed;
}

.asset-description-input {
  border: none;
  background: transparent;
  color: #6B7280;
  width: 100%;
  resize: vertical;
  font-size: 13px;
  margin-bottom: 8px;
  display: block;
}

.status-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 14px;
}

.status-chip-fail, .status-chip-avail, .status-chip-op {
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

.status-chip-op {
  background: rgba(16, 185, 129, 0.12);
  color: rgb(11.128358209, 128.671641791, 89.7223880597);
}

.status-chip-op.status-chip--breakdown {
  background: rgba(220, 38, 38, 0.1);
  color: #DC2626;
}

.status-chip-avail {
  background: rgba(0, 102, 204, 0.08);
  color: #0066CC;
}

.chip-live-badge {
  color: #F59E0B;
  font-weight: 700;
}

.status-chip-fail {
  background: rgba(245, 158, 11, 0.12);
  color: rgb(177.3322834646, 114.1031496063, 7.2677165354);
}

.uptime-control {
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(209, 213, 219, 0.55);
  border-radius: 10px;
  overflow: hidden;
  background: #FFFFFF;
  flex-shrink: 0;
}

.uptime-control.is-disabled {
  opacity: 0.6;
}

.uptime-control.is-disabled,
.uptime-control.is-disabled input,
.uptime-control.is-disabled .uptime-toggle {
  cursor: not-allowed;
}

.uptime-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin: 0;
  background: transparent;
  border: none;
  border-right: 1px solid rgba(209, 213, 219, 0.55);
  cursor: pointer;
  color: #9CA3AF;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}

.uptime-btn:disabled {
  cursor: not-allowed;
}

.uptime-control.is-active .uptime-btn {
  background: rgba(0, 184, 169, 0.1);
  color: rgb(0, 103, 94);
}

.uptime-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
}

.uptime-input-wrap input {
  width: 64px;
  border: none;
  outline: none;
  background: transparent;
  color: #1A2B3C;
  font-size: 14px;
  font-weight: 700;
  text-align: right;
  padding: 10px 0;
}

.uptime-input-wrap input:disabled {
  cursor: not-allowed;
}

.uptime-input-wrap .unit {
  color: rgb(151.5428571429, 159.4571428571, 170.4571428571);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.uptime-control--highlight {
  border-radius: 8px;
  animation: uptimeHighlightPulse 0.8s ease-in-out 2;
}

@keyframes uptimeHighlightPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(0, 184, 169, 0.45);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(0, 184, 169, 0.15);
  }
}

.chip-sub {
  font-weight: 500;
  opacity: 0.85;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  display: inline-block;
}

.status-chip--breakdown .status-dot {
  background: #DC2626;
}

.status-dot-pulse {
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
  animation: assetStatusPulse 1.6s infinite;
}

@keyframes assetStatusPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}
.icon-btn-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-btn {
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  min-width: 42px;
  padding: 0;
  margin: 0;
  border-radius: 8px;
  border: 1px solid #D1D5DB;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #374151;
  font-size: 16px;
  line-height: normal;
  cursor: pointer;
  text-decoration: none;
  vertical-align: middle;
}

.icon-btn[disabled], .icon-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.icon-btn:hover, .icon-btn:focus {
  color: #0066CC;
  border-color: #0066CC;
  text-decoration: none;
}

.icon-btn--primary {
  background: #17A2B8;
  color: #FFFFFF;
  border-color: #17A2B8;
}

.icon-btn--primary:hover, .icon-btn--primary:focus {
  background: rgb(0, 153.4, 140.8945652174);
  color: #FFFFFF;
  border-color: rgb(0, 153.4, 140.8945652174);
}

.code-tiles {
  display: flex;
  gap: 10px;
}

.code-box {
  width: 150px;
  text-align: center;
}

.code-tile {
  width: 150px;
  height: 150px;
  border-radius: 8px;
  border: 1px solid #D1D5DB;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  background: #FFFFFF;
  overflow: hidden;
  color: #6B7280;
  font-size: 32px;
}

.code-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.code-label {
  font-size: 11px;
  color: #6B7280;
  font-weight: 600;
  letter-spacing: 0.4px;
}

.code-box [data-tooltip]:before {
  font-size: 11px;
  padding: 2px 6px;
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bb-tabs-wrap {
  margin-bottom: 0;
}

.tabs-card-outer {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
}

.tabs-card {
  background: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 8px;
  display: flex;
  gap: 4px;
  flex: 1;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.tabs-card::-webkit-scrollbar {
  display: none;
}

.tabs-scroll-btn {
  flex-shrink: 0;
  width: 34px;
  min-height: 44px;
  align-self: stretch;
  border: 1px solid #D1D5DB;
  border-bottom: none;
  background: #f8fafc;
  color: #6B7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: background .15s, color .15s;
}

.tabs-scroll-btn--left {
  border-radius: 8px 0 0 0;
  border-right: none;
  margin-right: -1px;
}

.tabs-scroll-btn--right {
  border-radius: 0 8px 0 0;
  border-left: none;
  margin-left: -1px;
}

.tabs-scroll-btn:hover {
  background: #e8f4f8;
  color: #17A2B8;
}

.tab-content-area {
  border: 1px solid #D1D5DB;
  border-top: none;
  border-radius: 0 0 8px 8px;
  background: #FFFFFF;
  min-height: 320px;
  padding: 4px 0 0;
}

.tabs-card ul {
  display: flex;
  gap: 4px;
  list-style: none;
}

.tab-pill-wrap {
  list-style: none;
}

.tab-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #6B7280;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}

.tab-pill:hover, .tab-pill:focus {
  color: #1A2B3C;
  text-decoration: none;
}

.tab-pill--active, .tab-pill--active:hover, .tab-pill--active:focus {
  background: #17A2B8;
  color: #FFFFFF !important;
}
.tab-pill--active i, .tab-pill--active .fa {
  color: #FFFFFF !important;
}

.kpi-strip-row {
  margin-top: 8px;
}

.kpi-strip-row > [class*=col-],
.kpi-strip-collapsed > [class*=col-] {
  min-width: 0;
}

kpi-tile {
  display: block;
  height: 100%;
}

.kpi-tile {
  background: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-radius: 14px;
  padding: 18px 18px 16px;
  margin-bottom: 16px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  height: calc(100% - 16px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.kpi-tile__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.kpi-tile--disabled {
  cursor: default;
}

.kpi-tile__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #6B7280;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.info-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #D1D5DB;
  font-size: 10px;
  color: #6B7280;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  cursor: help;
  position: relative;
}

.kpi-tile__value {
  font-size: 30px;
  font-weight: 800;
  margin-bottom: 2px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: #1A2B3C;
}

.kpi-tile__unit {
  font-size: 14px;
  font-weight: 600;
  color: #6B7280;
}

.kpi-tile__live-badge {
  font-size: 11px;
  font-weight: 700;
  color: #F59E0B;
  background: rgba(245, 158, 11, 0.12);
  border-radius: 6px;
  padding: 2px 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.kpi-tile__delta {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 14px;
  color: #6B7280;
}

.kpi-tile__delta.is-good {
  color: #10B981;
}

.kpi-tile__delta.is-bad {
  color: #DC2626;
}

.kpi-tile__delta-label {
  font-weight: 500;
}

.kpi-tile__note {
  font-size: 11.5px;
  font-weight: 600;
  color: #F59E0B;
  margin-top: -8px;
  margin-bottom: 10px;
}

.kpi-tile__note .fa {
  margin-right: 3px;
}

.kpi-tile__no-data-cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.kpi-tile__no-data-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  border: 1px solid #00B8A9;
  border-radius: 4px;
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: #00B8A9;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.kpi-tile__no-data-cta:hover {
  background: #00B8A9;
  color: #FFFFFF;
}

.kpi-tile__coming-soon-wrap {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 100px;
}

.kpi-tile__coming-soon-preview {
  opacity: 0.16;
  filter: grayscale(1);
  pointer-events: none;
  user-select: none;
}

.kpi-tile__coming-soon-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.kpi-tile__coming-soon-badge span {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-radius: 9999px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: #6B7280;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  white-space: nowrap;
}

.kpi-tile__no-data-wrap {
  flex: 1 1 auto;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 0;
}

.kpi-tile__no-data-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #F9FAFB;
  border: 1px solid #D1D5DB;
  border-radius: 9999px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: #6B7280;
  white-space: nowrap;
}

.kpi-tile__month-boundary { stroke: #94a3b8; stroke-width: 1; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.kpi-tile__bars { position: relative; }
.kpi-tile__bar-boundary { position: absolute; top: 0; bottom: 0; border-left: 1px dashed #94a3b8; pointer-events: none; }
.kpi-tile__trend-caption { margin: 12px 0 6px; color: #64748b; font-size: 10px; font-weight: 500; }
.kpi-tile__trend-dates { display: flex; justify-content: space-between; gap: 8px; margin-top: -6px; color: #64748b; font-size: 10px; }
.kpi-tile__sparkline-dot { fill: #94a3b8; }
.kpi-tile--accent-green .kpi-tile__sparkline-dot { fill: #00b894; }
.kpi-tile--accent-amber .kpi-tile__sparkline-dot { fill: #f59e0b; }
.kpi-tile--accent-red .kpi-tile__sparkline-dot { fill: #ef4444; }
.kpi-tile__sparkline-dot.is-latest { stroke: #fff; stroke-width: .5; }

.kpi-tile__sparkline {
  width: 100%;
  flex: 1 1 auto;
  min-height: 34px;
  margin-bottom: 10px;
  overflow: visible;
}

.kpi-tile__sparkline-line {
  fill: none;
  stroke: #D1D5DB;
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}

.kpi-tile__sparkline-area {
  fill: #D1D5DB;
  opacity: 0.08;
  stroke: none;
}

.kpi-tile--accent-green .kpi-tile__sparkline-line {
  stroke: #10B981;
}

.kpi-tile--accent-green .kpi-tile__sparkline-area {
  fill: #10B981;
}

.kpi-tile--accent-amber .kpi-tile__sparkline-line {
  stroke: #F59E0B;
}

.kpi-tile--accent-amber .kpi-tile__sparkline-area {
  fill: #F59E0B;
}

.kpi-tile--accent-red .kpi-tile__sparkline-line {
  stroke: #DC2626;
}

.kpi-tile--accent-red .kpi-tile__sparkline-area {
  fill: #DC2626;
}

.kpi-tile__bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  flex: 1 1 auto;
  min-height: 34px;
  margin-bottom: 10px;
}

.kpi-tile__bar {
  flex: 1;
  border-radius: 2px 2px 0 0;
  background: #D1D5DB;
}

.kpi-tile__bar--peak {
  background: #DC2626;
}

.kpi-tile--accent-green .kpi-tile__bar {
  background: #10B981;
}

.kpi-tile--accent-amber .kpi-tile__bar {
  background: #F59E0B;
}

.kpi-tile--accent-red .kpi-tile__bar {
  background: #DC2626;
}

.kpi-tile__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #6B7280;
}

.status-dot--green {
  background: #10B981;
}

.status-dot--amber {
  background: #F59E0B;
}

.status-dot--red {
  background: #DC2626;
}

.status-dot--grey {
  background: #D1D5DB;
}

.kpi-tile__trend-caption { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.kpi-tile__latest-reading { color: #2563eb; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi-tile__latest-reading.is-falling { color: #dc2626; }
.kpi-tile__line-chart { position: relative; }
.kpi-tile__line-chart--availability { padding-left: 28px; }
.kpi-tile__line-chart--availability .kpi-tile__sparkline { height: 64px; }
.kpi-tile__chart-scale { position: absolute; left: 0; top: 3px; height: 58px; display: flex; flex-direction: column; justify-content: space-between; color: #64748b; font-size: 9px; line-height: 12px; font-variant-numeric: tabular-nums; }
.kpi-tile__chart-guides line { stroke: #e2e8f0; stroke-width: 1; vector-effect: non-scaling-stroke; }
.kpi-tile__line-chart--availability .kpi-tile__sparkline-line { stroke: #2563eb; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.kpi-tile__sparkline-drop { fill: none; stroke: #dc2626; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.kpi-tile__line-chart .kpi-tile__sparkline-dot { opacity: 0; }
.kpi-tile__line-chart .kpi-tile__sparkline-dot.is-latest,
.kpi-tile__line-chart .kpi-tile__sparkline-dot.is-isolated { opacity: 1; }
.kpi-tile__line-chart--availability .kpi-tile__sparkline-dot { fill: #2563eb; }
.kpi-tile__line-chart--availability .kpi-tile__sparkline-dot.is-falling { fill: #dc2626; }

.kpi-tile__info {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  padding: 0;
  background: #fff;
  font-family: inherit;
  font-weight: 600;
  font-size: 12px;
  text-transform: none;
  letter-spacing: normal;
  transition: background 0.15s, border-color 0.15s;
}

.kpi-tile__info:hover, .kpi-tile__info:focus {
  color: #2563eb;
  border-color: #93b4ed;
  background: #eff6ff;
}

.kpi-tile__info:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 3px;
}

.popover.kpi-formula-popover {
  width: 340px;
  max-width: calc(100vw - 24px);
  padding: 0;
  background: #fff;
  border: 1px solid #dce3ed;
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(23, 43, 77, 0.16), 0 2px 6px rgba(23, 43, 77, 0.06);
  color: #24344b;
  font-family: inherit;
  text-align: left;
  z-index: 1080;
}

.kpi-formula-popover .popover-body, .kpi-formula-popover .popover-content {
  padding: 0;
}

.kpi-formula {
  padding: 20px;
  font-size: 12px;
  line-height: 1.5;
  max-height: min(560px, 75vh);
  overflow-y: auto;
}

.kpi-formula__eyebrow {
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.kpi-formula__title {
  margin-top: 4px;
  color: #182b49;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.kpi-formula__description {
  margin: 8px 0 14px;
  color: #64748b;
}

.kpi-formula__equation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 10px;
  border: 1px solid #dbe7fa;
  border-radius: 9px;
  background: #f3f7fe;
  color: #254d86;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.kpi-formula__equation sup {
  font-size: 10px;
}

.kpi-formula__fraction {
  display: inline-flex;
  flex-direction: column;
  min-width: 0;
}

.kpi-formula__fraction > span:first-child {
  padding: 0 4px 6px;
  border-bottom: 1px solid #9bb4d5;
}

.kpi-formula__fraction > span:last-child {
  padding: 6px 4px 0;
}

.kpi-formula__terms {
  margin: 14px 0;
}

.kpi-formula__term + .kpi-formula__term {
  margin-top: 10px;
}

.kpi-formula__term dt {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-weight: 600;
  color: #334155;
}

.kpi-formula__term dt > span {
  flex-shrink: 0;
  color: #254d86;
  font-variant-numeric: tabular-nums;
}

.kpi-formula__term dd {
  margin: 3px 0 0;
  color: #64748b;
  font-size: 11px;
}

.kpi-formula__result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid #e8edf4;
  color: #64748b;
}

.kpi-formula__result strong {
  color: #182b49;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.kpi-formula__result small {
  margin-left: 4px;
  font-size: 11px;
  font-weight: 500;
}

.kpi-formula__note {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 12px;
  padding: 9px 10px;
  border-radius: 7px;
  background: #fff8eb;
  color: #946217;
  font-size: 11px;
}

.reliability-history__body {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.reliability-history__chart-col {
  flex: 1;
  min-width: 0;
}

@media (max-width: 768px) {
  .reliability-history__body {
    flex-direction: column;
  }
}
.calc-card {
  width: 300px;
  flex-shrink: 0;
  background: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  padding: 14px 16px;
}

@media (max-width: 768px) {
  .calc-card {
    width: 100%;
  }
}
.calc-card__title {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #6B7280;
  margin-bottom: 12px;
}

.calc-card__formula {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.calc-card__e {
  font-size: 16px;
  font-weight: 700;
  color: #1A2B3C;
}

.calc-card__e sup {
  font-size: 12px;
  vertical-align: super;
}

.calc-card__fraction {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
}

.calc-card__frac-cell {
  padding: 0 6px;
  white-space: nowrap;
}

.calc-card__frac-value {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #1A2B3C;
}

.calc-card__frac-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: #6B7280;
  margin-top: 2px;
}

.calc-card__frac-bar {
  border-top: 1.5px solid #1A2B3C;
  margin: 3px 0;
}

.calc-card__mult, .calc-card__eq {
  font-size: 14px;
  font-weight: 700;
  color: #1A2B3C;
  white-space: nowrap;
}

.calc-card__eq b {
  color: #17A2B8;
  font-size: 17px;
}

.calc-card__stat {
  display: flex;
  flex-direction: column;
}

.calc-card__stat .calc-card__frac-value {
  font-size: 22px;
  color: #17A2B8;
}

.calc-card__stat .calc-card__frac-label {
  font-size: 12px;
  margin-top: 4px;
}

.kpi-strip-collapsed {
  margin-top: 8px;
}

.kpi-tile-mini {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  padding: 10px 14px 10px 16px;
  margin-bottom: 16px;
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow 0.15s, transform 0.15s;
}

.kpi-tile-mini:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

.kpi-tile-mini--disabled {
  cursor: default;
}

.kpi-tile-mini--disabled:hover {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transform: none;
}

.kpi-tile-mini__label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #6B7280;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kpi-tile-mini__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.kpi-tile-mini__value {
  font-size: 16px;
  font-weight: 800;
  color: #1A2B3C;
  display: flex;
  align-items: baseline;
  gap: 3px;
  white-space: nowrap;
}

.kpi-tile-mini__unit {
  font-size: 11px;
  font-weight: 600;
  color: #6B7280;
}

.kpi-tile-mini__note {
  color: #F59E0B;
  font-size: 12px;
}

.kpi-tile-mini__coming-soon {
  color: #6B7280;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.status-dot--sm {
  width: 7px;
  height: 7px;
}

.kpi-strip-stack {
  position: relative;
}

.kpi-strip-stack > .kpi-strip-row,
.kpi-strip-stack > .kpi-strip-collapsed {
  transition: opacity 0.25s ease;
}

.kpi-strip-stack > .kpi-strip-row.is-hidden,
.kpi-strip-stack > .kpi-strip-collapsed.is-hidden {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  pointer-events: none;
}

/* Compact gutters stay consistent when zoom reduces the available CSS width. */
.kpi-strip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
    gap: 10px;
    margin: 8px 0 16px;
    align-items: stretch;
}
.kpi-strip-grid > .kpi-strip-cell { min-width: 0; padding: 0; }
.kpi-strip-cell > kpi-tile { display: block; height: 100%; }
.kpi-strip-grid .kpi-tile,
.kpi-strip-grid .kpi-tile-mini { height: 100%; margin-bottom: 0; box-sizing: border-box; }
.kpi-strip-grid .kpi-tile { padding: 16px 14px 14px; display: flex; flex-direction: column; }
.kpi-strip-grid .kpi-tile__body { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.kpi-strip-grid .kpi-tile__header { gap: 6px; align-items: flex-start; }
.kpi-strip-grid .kpi-tile__label { min-width: 0; overflow-wrap: anywhere; }
.kpi-strip-grid .kpi-tile__info { flex-shrink: 0; }

/* Secondary asset actions and a compact, labelled KPI section toolbar. */
/* The modal remains outside this size container, preserving viewport positioning. */
asset-header .asset-header-layout { container: asset-header-layout / inline-size; display: block; }
asset-header .header-card { flex-direction: row; padding: 16px 18px; gap: 14px; }
asset-header .header-right { flex-direction: column; align-items: flex-end; align-self: stretch; gap: 10px; }
asset-header .status-row { gap: 8px; margin-top: 8px; }
asset-header .uptime-control { display: inline-flex; width: auto; max-width: 100%; flex: 0 0 auto; }
asset-header .uptime-btn { padding: 8px 10px; gap: 6px; font-size: 13px; }
asset-header .uptime-input-wrap { padding: 0 8px; gap: 5px; }
asset-header .uptime-input-wrap input { width: 44px; min-width: 0; padding: 8px 0; font-size: 13px; }
asset-header .uptime-input-wrap .unit { font-size: 12px; }
asset-header .status-chip-op, asset-header .status-chip-avail, asset-header .status-chip-fail { padding: 8px 10px; font-size: 13px; gap: 6px; }
asset-header .asset-title { min-width: 0; }
asset-header .tag-row { margin-bottom: 10px; }
asset-header .code-box, asset-header .code-tile { width: 150px; }
asset-header .code-tile { height: 150px; }
@container asset-header-layout (max-width: 1100px) {
  asset-header .header-card { padding: 14px; gap: 12px; }
  asset-header .asset-title { font-size: 22px; }
  asset-header .asset-title-row { gap: 10px; }
  asset-header .asset-description-input { margin-bottom: 4px; }
  asset-header .code-box, asset-header .code-tile { width: 150px; }
  asset-header .code-tile { height: 150px; }
  asset-header .code-tiles { gap: 8px; }
}
@container asset-header-layout (max-width: 650px) {
  asset-header .header-card { flex-direction: column; }
  asset-header .header-right { flex-direction: row; align-items: center; flex-wrap: wrap; }
  asset-header .asset-title { font-size: 20px; }
}
/* Reserve the document scrollbar once; Bootstrap must not add a second gutter. */
html:has(asset-header) { scrollbar-gutter: stable; }
@supports (scrollbar-gutter: stable) {
  body.modal-open:has(asset-header .modal.show) { padding-right: 0 !important; }
}
kpi-strip { display: block; container: asset-kpis / inline-size; }
@container asset-kpis (max-width: 1100px) {
  .kpi-strip-grid .kpi-tile:not(.kpi-tile--compact) { padding: 12px 10px; }
  .kpi-strip-grid .kpi-tile:not(.kpi-tile--compact) .kpi-tile__header { font-size: 12px; letter-spacing: 0; min-height: 32px; margin-bottom: 8px; }
  .kpi-strip-grid .kpi-tile:not(.kpi-tile--compact) .kpi-tile__value { font-size: 26px; }
  .kpi-strip-grid .kpi-tile:not(.kpi-tile--compact) .kpi-tile__no-data-wrap { min-height: 64px; padding: 8px 0; }
  .kpi-strip-grid .kpi-tile:not(.kpi-tile--compact) .kpi-tile__no-data-badge { padding: 5px 8px; font-size: 12px; }
  .kpi-strip-grid .kpi-tile__trend-caption { margin-top: 8px; }
}
asset-header .header-card { margin-bottom: 6px; }
asset-header .icon-btn-row { gap: 6px; }
asset-header .icon-btn-row .icon-btn { width: 30px; height: 30px; min-width: 30px; font-size: 13px; border-radius: 6px; }
.kpi-strip-toolbar { min-height: 28px; gap: 4px; }
.kpi-strip-title { margin-right: auto; color: #64748b; font-size: 12px; font-weight: 600; }
.kpi-strip-toolbar .btn { min-height: 28px; padding: 3px 6px; font-size: 12px; }
.kpi-strip-wrapper .kpi-strip-grid { margin-top: 4px; }
.kpi-strip-grid .kpi-tile__no-data-badge { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
/* Reuse each tile and its formula popover in both modes; no overlapping hidden grid. */
.kpi-strip-grid .kpi-tile--compact { min-height: 0; padding: 8px 10px; }
.kpi-tile--compact .kpi-tile__header { margin-bottom: 6px; font-size: 11px; }
.kpi-tile--compact .kpi-tile__value { font-size: 20px; flex-wrap: wrap; }
.kpi-tile--compact .kpi-tile__unit { font-size: 11px; }
.kpi-tile--compact .kpi-tile__delta,
.kpi-tile--compact .kpi-tile__note,
.kpi-tile--compact .kpi-tile__trend-caption,
.kpi-tile--compact .kpi-tile__line-chart,
.kpi-tile--compact .kpi-tile__bars,
.kpi-tile--compact .kpi-tile__trend-dates,
.kpi-tile--compact .kpi-tile__coming-soon-preview { display: none; }
.kpi-tile--compact .kpi-tile__no-data-wrap { min-height: 0; padding: 0; justify-content: flex-start; text-align: left; }
.kpi-tile--compact .kpi-tile__no-data-badge { padding: 0; border: 0; background: none; font-size: 11.5px; }
.kpi-tile--compact .kpi-tile__header { line-height: 1.3; letter-spacing: 0; }
.kpi-tile--compact .kpi-tile__body { flex: 0 0 auto; }
.kpi-tile__plot { position: relative; margin-bottom: 10px; color: #94a3b8; }
.kpi-tile__plot .kpi-tile__sparkline { display: block; height: 64px; margin-bottom: 0; }
.kpi-tile--accent-green .kpi-tile__plot { color: #00b894; }
.kpi-tile--accent-amber .kpi-tile__plot { color: #f59e0b; }
.kpi-tile--accent-red .kpi-tile__plot { color: #ef4444; }
.kpi-tile__line-chart--availability .kpi-tile__plot { color: #2563eb; }
.kpi-tile__point-target { position: absolute; top: 0; height: 100%; cursor: default; outline: none; }
.kpi-tile__point-marker { position: absolute; display: block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; box-sizing: border-box; }
.kpi-tile__point-marker.is-latest, .kpi-tile__point-marker.is-isolated { opacity: 1; }
.kpi-tile__point-marker.is-falling { color: #dc2626; }
.kpi-tile__point-target:hover .kpi-tile__point-marker,
.kpi-tile__point-target:focus .kpi-tile__point-marker { opacity: 1; width: 10px; height: 10px; border: 2px solid white; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); }
.kpi-trend-tooltip .tooltip-inner { background: #303740; border-radius: 6px; padding: 7px 10px; font-size: 12px; }
/* Location keeps its hierarchy navigation; visual treatment matches the asset register. */
.location-page { padding: 0 12px; min-width: 0; }
.location-page .location-tree-table { border: 1px solid #dce2e8; border-radius: 10px; background: #fff; }
.location-page .location-tree-heading { display: grid; grid-template-columns: minmax(0, 1fr) 60px 28px; gap: 8px; padding: 11px 14px; position: sticky; top: 0; z-index: 1; background: #f6f8fa; color: #64707d; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; border-radius: 10px 10px 0 0; border-bottom: 1px solid #dce2e8; }
.location-page .location-tree-heading > span:first-child { padding-left: 24px; }
.location-page .location-tree-heading > span:nth-child(2) { text-align: center; }
.location-page .location-tree-node .tree-row > [data-testid="kaizen-location-row"] { background: #fff; min-width: 0; border-bottom: 1px solid #edf0f3; padding: 10px 14px; }
.location-page .location-tree-record:hover { background: #f0f7f8 !important; }
.location-page .location-tree-record:focus-within { outline: 2px solid #138496; outline-offset: -2px; }
.location-page .location-name { display: inline-block; max-width: 100%; padding: 0; border: 0; background: transparent; color: #263746; font-size: 13px; font-weight: 600; vertical-align: middle; text-align: left; cursor: pointer; }
.location-page .location-child-count { display: inline-block; margin-left: 8px; color: #7b8794; font-size: 11px; white-space: nowrap; }
.location-page .location-tree-children .location-name { font-weight: 400; }
.location-page .tree-row.active > [data-testid="kaizen-location-row"] { background: #e5f5f7; border-color: #9ed6de !important; box-shadow: inset 3px 0 #138496; }
.location-page .tree-row-actions { flex-shrink: 0; gap: 8px; margin-left: 12px; }
.location-page .location-row-label { min-width: 0; flex: 1; }
.location-page .location-tree-toggle-slot { flex: 0 0 24px; width: 24px; }
.location-page .location-tree-toggle { width: 24px; padding: 4px !important; }
.location-page .location-add-slot { display: inline-flex; width: 28px; flex: 0 0 28px; }
.location-page .location-asset-count { width: 60px; min-width: 60px; text-align: center; background: transparent; color: #536374; font-size: 12px; }
.location-page .location-tree-children { margin: 0; padding: 0; }
.location-page .location-tree-children .location-row-label { padding-left: 24px; position: relative; }
.location-page .location-tree-children .location-row-label::before { content: ''; position: absolute; left: 12px; top: -11px; height: calc(50% + 11px); width: 18px; border-left: 1px solid #d6e1e5; border-bottom: 1px solid #d6e1e5; border-radius: 0 0 0 4px; }
.location-page .location-tree-children .tree-row:not(.active) > [data-testid="kaizen-location-row"] { background: #f8fafc; }
.location-page .add-child-btn { width: 28px; height: 28px; padding: 3px; border-radius: 6px; }
.location-page .location-detail-panel { position: relative; padding: 0 12px; }
.location-page .location-detail-close { position: absolute; z-index: 2; right: 24px; top: 12px; width: 30px; height: 30px; border: 1px solid #d5d9df; border-radius: 6px; background: white; color: #374151; }
.location-page .location-detail-card { margin: 0; padding: 22px 14px 14px; border: 1px solid #d5d9df; border-radius: 12px; background: white; }
.location-page .location-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 210px; align-items: start; gap: 12px 20px; }
.location-page .location-detail-main { display: block; grid-column: 1; grid-row: 1; max-width: none; width: 100%; padding: 0; min-width: 0; }
.location-page .location-detail-main > .row, .location-page .location-parent-wrapper { grid-column: 1; min-width: 0; margin-left: 0; margin-right: 0; }
.location-page .location-detail-content, .location-page .location-detail-comments { grid-column: 1 / -1 !important; min-width: 0; }
.location-page .location-detail-aside { grid-column: 2; grid-row: 1; min-width: 0; max-width: 100%; padding: 0; }
.location-page .location-detail-main > .row > input { min-width: 0; width: 0; flex: 1; font-size: 20px; font-weight: 600; text-overflow: ellipsis; }
.location-page .location-address-display { display: block; width: 100%; padding: 3px 0; border: 0; background: transparent; color: #64748b; text-align: left; font: inherit; font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.location-page .location-address-display:disabled { opacity: 1; cursor: default; }
.location-page .location-address-display:not(:disabled):hover { color: #14889b; }
.location-page .location-address-display:focus-visible { outline: 2px solid #17a2b8; outline-offset: 2px; }
.location-page .location-address-editor { box-sizing: border-box; width: 100%; min-width: 0; min-height: 54px; padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 6px; font: inherit; font-size: 13px; resize: vertical; }
.location-page .location-detail-timestamps { margin-top: 10px; font-size: 12px; line-height: 1.6; }
.location-page .location-detail-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; margin: 0; padding-top: 0 !important; padding-left: 0 !important; }
.location-page .location-detail-aside > .pull-right { float: none; display: flex; align-items: center; justify-content: flex-end; padding-right: 28px; margin-bottom: 8px; white-space: nowrap; }
.location-page .location-detail-aside > .pull-right > .w-100 { width: auto !important; }
.location-page .location-detail-aside > .pull-right .btn { padding: 4px; font-size: 12px; }
.location-page .location-detail-tabs .nav-link { flex: 0 0 auto; white-space: nowrap; padding: 9px 10px; font-size: 13px; }
.location-page .location-detail-aside .qr-img { width: 150px; min-width: 150px; height: auto; max-width: none; }
@media (max-width: 767px) {
  .location-page .location-detail-layout { grid-template-columns: minmax(0, 1fr); }
  .location-page .location-detail-aside { grid-column: 1; grid-row: 2; }
  .location-page .location-parent-wrapper { padding-right: 24px; }
  .location-page .location-detail-main > .row > input { font-size: 18px; }
}
@media (pointer: coarse) {
  asset-header .icon-btn-row .icon-btn { width: 36px; height: 36px; min-width: 36px; }
  .kpi-strip-toolbar .btn { min-height: 36px; }
}

.kpi-formula__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.kpi-formula__direction {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #e7f7f4;
  color: #117c6b;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
}

.kpi-tile--skeleton {
  cursor: default;
}

.kpi-tile-skeleton__bar {
  background: linear-gradient(90deg, #F3F4F6 25%, rgb(231.3428571429, 233.3142857143, 237.2571428571) 37%, #F3F4F6 63%);
  background-size: 400% 100%;
  animation: kpiSkeletonShimmer 1.4s ease infinite;
  border-radius: 4px;
  margin-bottom: 8px;
}

.kpi-tile-skeleton__bar--label {
  width: 60%;
  height: 10px;
}

.kpi-tile-skeleton__bar--value {
  width: 45%;
  height: 22px;
}

.kpi-tile-skeleton__bar--spark {
  width: 100%;
  height: 28px;
}

.kpi-tile-skeleton__bar--target {
  width: 35%;
  height: 10px;
  margin-bottom: 0;
}

@keyframes kpiSkeletonShimmer {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
.field-card {
  background: #FFFFFF;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 8px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.15s;
}

.field-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.info-card-surface {
  background: #FFFFFF;
}

.activities-card {
  background: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-radius: 12px;
  padding: 16px 18px 18px;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.activities-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.activities-title {
  font-size: 15px;
  font-weight: 800;
  margin: 0;
  color: #1A2B3C;
  letter-spacing: -0.2px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.activities-seg {
  display: inline-flex;
  background: #F3F4F6;
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}

.activities-seg__btn {
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: #6B7280;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
}

.activities-seg__btn.is-active {
  background: #FFFFFF;
  color: #1A2B3C;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.activities-head-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.activities-sort-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.activities-refresh-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid #D1D5DB;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6B7280;
  cursor: pointer;
  font-size: 12px;
}

.activities-refresh-btn:hover {
  color: #17A2B8;
  border-color: #17A2B8;
}

.activities-load-more {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}

.activities-load-more a {
  color: #17A2B8;
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
}

.activities-empty {
  margin-top: 10px;
  padding: 28px 16px 22px;
  text-align: center;
  border-top: 1px solid #D1D5DB;
}

.activities-empty-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(124, 58, 237, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  margin: 0 auto 10px;
  color: #7C3AED;
}

.activities-empty h4 {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 3px;
  color: #1A2B3C;
}

.activities-empty p {
  font-size: 12px;
  color: #6B7280;
  margin: 0;
}

.comment-composer {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.comment-avatar {
  flex-shrink: 0;
}

.comment-avatar img {
  width: 30px !important;
  height: 30px !important;
}

.comment-composer-body {
  flex: 1;
  min-width: 0;
}

.comment-composer-box {
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  background: #FFFFFF;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.comment-composer-box:focus-within {
  border-color: #17A2B8;
  box-shadow: 0 0 0 3px rgba(0, 184, 169, 0.12);
}

.comment-composer-box textarea {
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  font-size: 13px;
  font-family: inherit;
  padding: 9px 10px 4px;
  color: #1A2B3C;
  min-height: 18px;
  background: transparent;
}

.comment-composer-box textarea::placeholder {
  color: #6B7280;
}

.comment-files-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.comment-files-wrap .border-dotted {
  border: 1.5px dashed #D1D5DB !important;
  border-radius: 8px;
}
.comment-files-wrap .border-dotted:hover {
  border-color: #17A2B8 !important;
  background: rgba(0, 184, 169, 0.06);
}
.comment-files-wrap .fa-cloud-upload {
  color: #6B7280;
}
.comment-files-wrap .border-dotted:hover .fa-cloud-upload {
  color: #17A2B8;
}
.comment-files-wrap .text-muted {
  color: #6B7280 !important;
  font-size: 12px;
}

.comment-actions-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 0 8px 8px;
}

.comment-actions-row__buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.btn-comment-ghost {
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  background: transparent;
  color: #6B7280;
}

.btn-comment-primary {
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  background: #17A2B8;
  color: #FFFFFF;
}

.btn-comment-primary:disabled {
  background: #D1D5DB;
  cursor: not-allowed;
}

.comment-item {
  display: flex;
  gap: 9px;
  padding: 10px 0;
  border-top: 1px solid #F3F4F6;
}

.comment-item:first-child {
  border-top: none;
}

.comment-item__avatar {
  flex-shrink: 0;
}

.comment-item__avatar img {
  width: 26px !important;
  height: 26px !important;
}

.comment-item__body {
  flex: 1;
  min-width: 0;
}

.comment-item__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 2px;
}

.comment-item__name {
  font-size: 12px;
  font-weight: 700;
  color: #1A2B3C;
}

.comment-item__time {
  font-size: 11px;
  color: #6B7280;
  white-space: nowrap;
}

.comment-item__text {
  font-size: 12.5px;
  color: #374151;
  margin: 0 0 4px;
  white-space: pre-wrap;
}

.comment-item__history {
  margin: 3px 0;
}

.comment-item__actions {
  display: flex;
  gap: 10px;
  margin-top: 2px;
}

.comment-item__actions span {
  font-size: 11px;
  font-weight: 600;
  color: #6B7280;
  cursor: pointer;
}

.comment-item__actions span:hover {
  color: #17A2B8;
}

@media (max-width: 1024px) {
  .header-card {
    flex-direction: column;
  }
  .header-right {
    align-self: flex-start;
    flex-direction: row;
    align-items: center;
  }
}
@media (max-width: 575.98px) {
  .kpi-tile__value {
    font-size: 22px;
  }
  .header-right {
    flex-wrap: wrap;
  }
  .activities-head {
    align-items: flex-start;
  }
  .activities-seg {
    margin-left: 0;
  }
}
.breakdown-alert-card {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #F3F4F6;
}

.toggle-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
  font-weight: 700;
  color: #1A2B3C;
}

.breakdown-alert-card .switch input:checked + span {
  background-color: #17A2B8;
  border-color: #17A2B8;
}

.field-group {
  margin-bottom: 16px;
}

.field-group:last-child {
  margin-bottom: 0;
}

.field-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 9px;
}

.field-optional {
  font-weight: 500;
  color: #6B7280;
  font-size: 12.5px;
}

.field-icon-badge {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: rgba(0, 184, 169, 0.1);
  color: #17A2B8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}

.field-hint {
  font-size: 12px;
  color: #6B7280;
  margin-top: 6px;
}

.role-select .dropdown-toggle {
  display: block;
  width: 100%;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  color: #1A2B3C;
  background: #FFFFFF;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.role-select .dropdown-toggle:hover {
  border-color: #6B7280;
}
.role-select.open .dropdown-toggle {
  border-color: #17A2B8;
  box-shadow: 0 0 0 3px rgba(0, 184, 169, 0.12);
}

.section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.section-icon-badge {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(0, 184, 169, 0.1);
  color: #17A2B8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

.section-title {
  font-size: 13px;
  font-weight: 800;
  margin: 0;
  color: #1A2B3C;
}

.field-input-icon {
  position: relative;
}

.field-input-icon .prefix-ic {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: #6B7280;
  font-size: 12px;
  pointer-events: none;
}

.field-input-icon .form-control {
  padding-left: 30px;
  border-radius: 8px;
  font-size: 13px;
}

.field-input-icon .form-control:focus {
  border-color: #17A2B8;
  box-shadow: 0 0 0 3px rgba(0, 184, 169, 0.12);
}

.field-hint code {
  background: #F3F4F6;
  color: #374151;
  padding: 1px 5px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
}

.add-fields-shell {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding: 0;
}

.add-fields-head {
  padding: 18px 22px 14px;
  border-bottom: 1px solid #D1D5DB;
}

.add-fields-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}

.add-fields-title-row h4 {
  font-size: 17px;
  font-weight: 800;
  margin: 0;
  color: #1A2B3C;
  letter-spacing: -0.2px;
}

.add-fields-scope {
  color: #6B7280;
  font-weight: 600;
  font-size: 13px;
}

.add-fields-close {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #6B7280;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.add-fields-close:hover {
  background: #F3F4F6;
  color: #374151;
}

.add-fields-controls {
  display: flex;
  gap: 10px;
  align-items: center;
}

.add-fields-search {
  flex: 1;
  position: relative;
}

.add-fields-search input {
  width: 100%;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  padding: 8px 12px 8px 32px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  background: #F3F4F6;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.add-fields-search input:focus {
  border-color: #17A2B8;
  box-shadow: 0 0 0 3px rgba(0, 184, 169, 0.12);
  background: #FFFFFF;
}

.add-fields-search .icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #6B7280;
  font-size: 12px;
  pointer-events: none;
}

.btn-create-field {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  background: #1A2B3C;
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.btn-create-field:hover {
  background: rgb(13.6651162791, 22.6, 31.5348837209);
  color: #FFFFFF;
}

.add-fields-body {
  display: flex;
  height: 60vh;
}

.field-list-panel {
  width: 280px;
  flex-shrink: 0;
  overflow-y: auto;
  border-right: 1px solid #D1D5DB;
  transition: width 0.15s;
}

.field-list-panel--full {
  width: 100%;
  border-right: none;
}

.field-detail-panel {
  flex: 1;
  min-width: 0;
  padding: 18px 22px;
  overflow-y: auto;
}

.field-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border-bottom: 1px solid #F3F4F6;
  cursor: pointer;
  transition: background 0.12s;
}

.field-row:hover {
  background: #F3F4F6;
}

.field-row.item-selected {
  background: rgba(0, 184, 169, 0.08);
  box-shadow: inset 3px 0 0 #17A2B8;
}

.field-row__name {
  font-size: 13px;
  font-weight: 600;
  color: #1A2B3C;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.field-row__name span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field-row__edit-tag {
  font-size: 11px;
  font-weight: 700;
  color: #17A2B8;
  background: #FFFFFF;
  border: 1px solid rgba(0, 184, 169, 0.35);
  padding: 1px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.field-row__type {
  font-size: 11.5px;
  color: #6B7280;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.field-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.field-detail-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #6B7280;
  margin-bottom: 3px;
}

.field-detail-meta .meta-chip {
  background: #F3F4F6;
  color: #374151;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.field-detail-name {
  font-size: 15px;
  font-weight: 800;
  color: #1A2B3C;
}

.field-detail-actions {
  display: flex;
  gap: 6px;
}

.info-banner {
  background: rgba(0, 102, 204, 0.08);
  border: 1px solid rgba(0, 102, 204, 0.25);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12.5px;
  color: rgb(0, 76.5, 153);
  line-height: 1.5;
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.info-banner .ic {
  flex-shrink: 0;
  font-size: 13px;
  margin-top: 1px;
}

.field-select {
  width: 100%;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  font-family: inherit;
  color: #1A2B3C;
  background: #FFFFFF;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.field-select:focus {
  outline: none;
  border-color: #17A2B8;
  box-shadow: 0 0 0 3px rgba(0, 184, 169, 0.12);
}

.field-card .form-control {
  border-radius: 8px;
  font-size: 13px;
}

.field-card .form-control:focus {
  border-color: #17A2B8;
  box-shadow: 0 0 0 3px rgba(0, 184, 169, 0.12);
}

.add-fields-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid #D1D5DB;
}

.btn-comment-danger {
  border-radius: 7px;
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  background: #DC2626;
  color: #FFFFFF;
}

@media (max-width: 680px) {
  .add-fields-body {
    flex-direction: column;
    height: auto;
    max-height: 70vh;
  }
  .field-list-panel {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #D1D5DB;
    max-height: 220px;
  }
}
.btn-primary-dark {
  background: #17a2b8;
  color: #fff;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  outline: none;
  border: none;
}
.btn-primary-dark:hover {
  color: #fff;
}
.btn-primary-dark:active {
  box-shadow: none !important;
}
.btn-primary-dark:focus {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.btn-primary-light {
  background: rgba(23, 162, 184, 0.8);
  color: #fff;
}
.btn-primary-light:hover {
  color: #fff;
}

.btn-secondary-dark {
  padding: 15px 30px;
  border-radius: 10px;
  background: #eee;
  font-size: 16px;
  font-weight: 100;
}

.btn-secondary-sm {
  padding: 10px 20px;
  border-radius: 10px;
  background: #eee;
  font-size: 16px;
  font-weight: 100;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
}
.btn-secondary-sm:hover {
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
}
.btn-secondary-sm:focus {
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
}

.btn-icon {
  padding: 5px;
  border-radius: 4px;
  background: #eee;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
}
.btn-icon:hover {
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
}
.btn-icon:focus {
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
}

.btn-edit {
  margin: 0;
  padding: 0 5px;
  color: #17a2b8;
}
.btn-edit:hover {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.btn-get-started {
  position: relative;
  display: inline-block;
}
.btn-get-started::after {
  content: "";
  width: 100%;
  height: 100%;
  background: #17a2b8;
  border-radius: 5px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  animation: expand 1s linear infinite;
}

@keyframes expand {
  0% {
    opacity: 0.7;
    transform: scaleX(1) scaleY(1);
  }
  100% {
    opacity: 0;
    transform: scaleX(1.3) scaleY(1.5);
  }
}
.btn-bottom-sticky {
  position: sticky;
  bottom: -20px;
}

.profie-img {
  position: relative;
}
.profie-img .img-edit-btn {
  position: absolute;
  left: 5px;
  bottom: 5px;
}

.btn-secondary {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.btn-secondary:active {
  box-shadow: none !important;
}
.btn-secondary:focus {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.btn-danger {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.btn-danger:active {
  box-shadow: none !important;
}
.btn-danger:focus {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.btn-none {
  padding: 0;
  margin: 0;
  display: inline-block;
}
.btn-none:focus {
  box-shadow: none;
  outline: none;
}

.floating-btns {
  position: sticky;
  bottom: 20px;
  right: 0;
  z-index: 1;
}

.dropdown-btn {
  position: relative;
}
.dropdown-btn:hover .dropdown-btn-options {
  opacity: 1;
  font-size: 14px;
  width: 200px;
  height: auto;
}
.dropdown-btn-options {
  padding: 10px 15px;
  position: absolute;
  top: 30px;
  left: 0;
  width: 0px;
  height: 0px;
  background-color: white;
  font-size: 0px;
  opacity: 0;
}

.setup-btns td {
  cursor: pointer;
}

.setup-btn {
  color: #fff;
  background-color: #17a2b8;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.multi-warehouse-disable-btn {
  position: relative;
}
.multi-warehouse-disable-btn a {
  position: absolute;
  right: 0;
  top: 100%;
  background: #fff;
  color: #444;
  white-space: nowrap;
  text-decoration: none;
  margin-top: 2px;
  border: 1px solid #ddd;
  z-index: 10;
  clip-path: polygon(100% 0, 100% 0%, 100% 100%, 100% 100%);
  transition: all 0.3s;
}

.multi-warehouse-disable-btn:hover a {
  clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
}

.popup {
  width: 100vw;
  height: 100vh;
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
}
.popup__container {
  min-width: 60%;
  max-width: 90%;
  background: white;
  margin: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
  border-radius: 5px;
  padding: 30px;
  text-align: center;
  max-height: 95vh;
  overflow-y: scroll;
  scroll-behavior: smooth;
  position: relative;
}
.popup__content {
  display: table;
  width: 100%;
  height: 100%;
  padding: 30px;
}
.popup__left {
  display: table-cell;
  width: 33.3333%;
  padding-right: 30px;
  text-align: right;
}
.popup__right {
  display: table-cell;
  width: 66.6666%;
  padding-left: 30px;
  border-left: 1px solid gray;
  text-align: left;
}

.input-delete-icon {
  visibility: hidden;
}

.input-hover:hover .input-delete-icon {
  visibility: visible;
}

.menu-search {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  color: #17a2b8;
  height: 50vh;
  width: 90%;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 20px 30px;
  z-index: 99;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.menu-search-heading {
  margin-top: 40px;
}

cron-gen .panel {
  width: 100%;
}
cron-gen .cron-gen-main ul.nav {
  margin: 0px !important;
}
cron-gen .cron-gen-main .nav li {
  margin: 10px;
}
cron-gen .cron-gen-main .form-control {
  display: initial;
  width: 70px;
}
cron-gen .cron-gen-main .well.well-small {
  padding: 10px;
  background: #eee;
  margin: 5px;
  border-radius: 3px;
}
cron-gen .cron-gen-main .inline-block {
  display: inline-block;
}

.cron-gen-box {
  padding: 15px;
  margin-bottom: 15px;
}

.cron-gen-box:hover {
  border-bottom: 1px solid #aaa;
  box-shadow: 2px 2px 10px #eee;
  border-top: 1px solid #aaa;
  transition: all 200ms ease;
  background: rgba(238, 238, 238, 0.3215686275);
}

/* --- SWITCH --- */
.switch * {
  cursor: pointer;
}

.switch [type=checkbox] {
  display: none;
}

.switch input {
  opacity: 0;
  position: absolute;
  z-index: -1;
}

.switch span {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 100px;
  transition: all 0.5s;
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1) inset;
}

.switch span:after {
  content: "";
  position: absolute;
  background-color: #fff;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  border: 1px solid #ddd;
  border-radius: 400px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.2s;
}

.switch input:checked + span {
  background-color: teal;
  border-color: teal;
  transition: all 0.5s;
}

.switch input:checked + span:after {
  left: 50%;
  transition: all 0.2s;
}

.delete {
  font-size: 18px;
  color: #ff5858;
  margin-left: 10px;
}

/*# sourceMappingURL=scss-style.css.map */

/* ═══════════════════════════════════════════════════════════════
   IOT History modal  (extracted from iot-history.html)
   ═══════════════════════════════════════════════════════════════ */
/* ── Modal shell overrides ─────────────────────────────────────────── */
#show-history .modal-content.ih-modal-content{border-radius:16px;border:none;box-shadow:0 28px 64px rgba(16,18,23,.22),0 2px 8px rgba(16,18,23,.08);overflow:hidden;}
#show-history .modal-header.ih-modal-header{padding:20px 24px 18px;border-bottom:1px solid #e7e9ee;align-items:center;}
.ih-modal-title{font-size:17px;font-weight:800;margin:0;display:flex;align-items:center;gap:10px;color:#16181d;}
.ih-type-badge{font-size:12px;font-weight:700;padding:3px 9px;border-radius:6px;background:#f1f2f5;color:#5b6270;letter-spacing:.2px;}
.ih-close-x{width:30px;height:30px;border-radius:8px;border:none;background:transparent;color:#9aa0ab;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;padding:0;flex-shrink:0;}
.ih-close-x:hover{background:#f1f2f5;color:#3a3f4a;}
/* ── Toolbar ───────────────────────────────────────────────────────── */
.ih-toolbar{display:flex;align-items:center;gap:10px;padding:14px 24px;border-bottom:1px solid #e7e9ee;flex-wrap:wrap;}
.ih-date-group{display:flex;align-items:center;gap:6px;}
.ih-lbl{font-size:12.5px;font-weight:700;color:#7a8190;margin:0;}
.ih-date-input{border:1px solid #e7e9ee;border-radius:9px;padding:7px 10px;font-size:13px;font-family:inherit;color:#16181d;background:#fff;outline:none;cursor:pointer;transition:border-color .15s;}
.ih-date-input:focus{border-color:#138496;box-shadow:0 0 0 3px rgba(23,162,184,.12);}
.ih-sep{color:#d0d4db;font-size:14px;}
.ih-limit-group{display:flex;align-items:center;gap:7px;}
.ih-select{border:1px solid #e7e9ee;border-radius:9px;padding:7px 10px;font-size:13px;font-family:inherit;color:#16181d;background:#fff;outline:none;cursor:pointer;}
.ih-search-btn{width:34px;height:34px;border-radius:9px;border:1px solid #e7e9ee;background:#fff;display:flex;align-items:center;justify-content:center;color:#6b7280;font-size:14px;cursor:pointer;flex-shrink:0;}
.ih-search-btn:hover{border-color:#138496;color:#0d6d7e;}
/* ── Tabs row ──────────────────────────────────────────────────────── */
.ih-tabs-row{display:flex;justify-content:space-between;align-items:center;padding:10px 24px 0;border-bottom:1px solid #e7e9ee;}
.ih-seg{display:inline-flex;background:#f1f2f5;border-radius:9px;padding:3px;gap:2px;}
.ih-seg-btn{display:flex;align-items:center;gap:6px;border:none;background:transparent;font-size:13px;font-weight:600;color:#6b7280;padding:7px 14px;border-radius:7px;cursor:pointer;}
.ih-seg-btn.ih-seg-active{background:#fff;color:#16181d;box-shadow:0 1px 2px rgba(16,18,23,.08);}
.ih-add-btn{width:32px;height:32px;border-radius:9px;border:none;background:#138496;color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin-bottom:10px;line-height:1;padding:0;}
.ih-add-btn:hover{background:#0d6d7e;}
/* ── Add form ──────────────────────────────────────────────────────── */
.ih-add-form{padding:14px 24px;background:#fafbfc;border-bottom:1px solid #e7e9ee;}
.ih-add-inner{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;}
.ih-add-field{display:flex;flex-direction:column;gap:5px;}
.ih-add-actions{display:flex;gap:8px;align-items:center;}
/* ── Table ─────────────────────────────────────────────────────────── */
.ih-table-wrap{overflow-x:auto;}
.ih-table-wrap table{width:100%;border-collapse:collapse;min-width:560px;}
.ih-table-wrap thead th{text-align:left;font-size:11.5px;font-weight:800;letter-spacing:.3px;color:#7a8190;text-transform:uppercase;padding:12px 16px;background:#fafbfc;border-bottom:1px solid #e7e9ee;white-space:nowrap;}
.ih-table-wrap tbody td{padding:12px 16px;font-size:13.5px;color:#3a3f4a;border-bottom:1px solid #e7e9ee;vertical-align:middle;}
.ih-table-wrap tbody tr:last-child td{border-bottom:none;}
.ih-table-wrap tbody tr:hover td{background:#fafbfc;}
.ih-td-num{color:#9aa0ab;font-weight:600;font-size:12px;}
.ih-value{font-weight:800;color:#0d6d7e;}
.ih-empty-value{color:#d0d4db;}
.ih-row-selected td{background:#e8f4f8 !important;}
.iot-row-deleting{opacity:0;transform:translateX(30px);transition:opacity .35s ease,transform .35s ease;pointer-events:none;}
/* ── Creator badges ────────────────────────────────────────────────── */
.ih-creator-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;}
.ih-creator-name{font-size:13.5px;font-weight:600;color:#3a3f4a;}
.ih-formula-tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;background:#f4f1ff;color:#6d4ce0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:normal;word-break:break-all;overflow-wrap:anywhere;max-width:100%;cursor:pointer;}
.ih-manual-tag{display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;background:#f1f2f5;color:#5b6270;white-space:nowrap;cursor:pointer;}
/* ── Action buttons ────────────────────────────────────────────────── */
.ih-actions{display:flex;gap:6px;}
.ih-act-btn{width:28px;height:28px;border-radius:7px;border:1px solid #e7e9ee;background:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;color:#6b7280;cursor:pointer;}
.ih-act-btn-del:hover{border-color:#f5c2c2;color:#dc2626;background:#fdecec;}
.ih-act-btn-edit:hover{border-color:#138496;color:#0d6d7e;}
/* ── Chart controls ────────────────────────────────────────────────── */
.ih-chart-controls{display:flex;align-items:center;gap:14px;padding:14px 24px 12px;flex-wrap:wrap;border-bottom:1px solid #e7e9ee;}
.ih-toggle-label{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:#3a3f4a;cursor:pointer;user-select:none;margin:0;}
.ih-toggle-label input[type=checkbox]{width:15px;height:15px;accent-color:#138496;cursor:pointer;margin:0;}
.ih-ctrl-divider{width:1px;height:20px;background:#e7e9ee;flex-shrink:0;}
.ih-ctrl-group{display:flex;align-items:center;gap:6px;}
.ih-ctrl-lbl{font-size:12px;font-weight:700;color:#7a8190;margin:0;}
.ih-ctrl-select{border:1px solid #e7e9ee;border-radius:8px;padding:6px 10px;font-size:13px;font-family:inherit;color:#16181d;background:#fff;outline:none;cursor:pointer;}
.ih-ctrl-select:focus{border-color:#138496;}
.ih-chart-y-lbl{font-size:11.5px;font-weight:700;color:#aab0ba;letter-spacing:.3px;padding:12px 24px 4px;}
.ih-chart-area{padding:0 24px 8px;}
.ih-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;gap:12px;color:#9aa0ab;}
.ih-empty-state i{font-size:36px;color:#d0d4db;}
.ih-empty-state p{margin:0;font-size:14px;font-weight:600;color:#6b7280;}
.ih-empty-state span{font-size:12.5px;color:#9aa0ab;}
/* ── Footer ────────────────────────────────────────────────────────── */
.ih-modal-foot{display:flex;justify-content:space-between;align-items:center;padding:14px 24px;border-top:1px solid #e7e9ee;}
.ih-download-btn{display:inline-flex;align-items:center;gap:8px;background:#138496;color:#fff;border:none;border-radius:9px;padding:10px 18px;font-size:13.5px;font-weight:700;cursor:pointer;}
.ih-download-btn:hover{background:#0d6d7e;}
.ih-close-btn{border:1px solid #e7e9ee;background:#fff;border-radius:9px;padding:10px 18px;font-size:13.5px;font-weight:700;color:#3a3f4a;cursor:pointer;}
.ih-close-btn:hover{border-color:#c9ccd2;}
.ih-save-btn{display:inline-flex;align-items:center;gap:6px;background:#138496;color:#fff;border:none;border-radius:9px;padding:8px 16px;font-size:13px;font-weight:700;cursor:pointer;}
.ih-save-btn:hover{background:#0d6d7e;}
.ih-clear-btn{border:1px solid #e7e9ee;background:#fff;border-radius:9px;padding:8px 16px;font-size:13px;font-weight:700;color:#3a3f4a;cursor:pointer;}
.ih-clear-btn:hover{border-color:#c9ccd2;}

/* ═══════════════════════════════════════════════════════════════
   Asset list  (extracted from list-item-assets.html)
   ═══════════════════════════════════════════════════════════════ */
.al-table{width:100%;border-collapse:collapse;table-layout:auto;}
.al-table thead th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#aab0ba;padding:6px 10px;border-bottom:1px solid #e7e9ee;background:#fafbfc;white-space:nowrap;}
.al-table thead th.al-th-id{padding-left:70px;}
.al-row{cursor:pointer;transition:background .12s, box-shadow .12s;}
.al-row td{padding:5px 10px;height:40px;box-sizing:border-box;vertical-align:middle;font-size:13px;border-bottom:1px solid #e7e9ee;}
.al-row td.al-td-id{padding-left:16px;}
.al-row:hover{background:#f0f8fa;box-shadow:inset 2px 0 0 #74c4d4;}
.al-row.al-row--selected{background:#d1ecf1;box-shadow:inset 3px 0 0 #138496;}
.al-row.al-row--selected:hover{background:#cce5e9;}
.al-row.al-row--child{background:#fafbfc;}
.al-row.al-row--child td.al-td-id{padding-left:40px;}
.al-row.al-row--child:hover{background:#f0f8fa;box-shadow:inset 2px 0 0 #74c4d4;}
.al-row.al-row--child.al-row--selected{background:#d1ecf1;box-shadow:inset 3px 0 0 #138496;}
.al-td-id{white-space:nowrap;}
.al-drag{color:#d0d4db;font-size:12px;cursor:grab;line-height:1;display:inline-block;margin-right:6px;}
.al-drag:hover{color:#9aa0ab;}
.al-expand-btn{width:20px;height:20px;border:none;background:transparent;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:10px;color:#9aa0ab;cursor:pointer;transition:background .12s,color .12s;padding:0;vertical-align:middle;margin-right:4px;}
.al-expand-btn:hover{background:#d1ecf1;color:#0d6d7e;}
.al-expand-btn.al-expand-open{color:#0d6d7e;}
.al-expand-spacer{display:inline-block;width:20px;margin-right:4px;}
.al-id{font-size:11px;font-weight:700;color:#17A2B8;background:rgba(23,162,184,.1);border:none;border-radius:6px;padding:3px 8px;letter-spacing:.2px;white-space:nowrap;}
.al-row--selected .al-id{background:#17A2B8;color:#fff;}
.al-row.al-row--child .al-id{background:transparent;color:#6cb6c6;}
.al-id--breakdown{color:#DC2626;background:rgba(220,38,38,.1);}
.al-row--selected .al-id.al-id--breakdown{background:#DC2626;color:#fff;}
.al-row.al-row--child .al-id--breakdown{color:#DC2626;}
.al-td-name{font-size:13px;font-weight:600;color:#16181d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px;}
.al-row--selected .al-td-name{font-weight:800;color:#0d6d7e;}
.al-td-loc,.al-td-cat{font-size:12.5px;color:#7a8190;white-space:nowrap;}
.al-td-loc .fa,.al-td-cat .fa{color:#9aa0ab;font-size:11px;margin-right:4px;}
.al-row--selected .al-td-loc,.al-row--selected .al-td-cat{color:#138496;}
.al-op-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap;background:rgba(16,185,129,.12);color:#0b8159;}
.al-op-badge .status-dot{width:6px;height:6px;}
.al-op-badge--breakdown{background:rgba(220,38,38,.1);color:#DC2626;}
.al-op-badge--breakdown .status-dot{background:#DC2626;}
.al-avail-cell{display:inline-flex;align-items:center;gap:8px;}
.al-avail-bar{width:60px;height:6px;border-radius:999px;background:#EDEEF1;overflow:hidden;flex-shrink:0;}
.al-avail-bar-fill{display:block;height:100%;border-radius:999px;}
.al-avail-bar-fill--green{background:#10B981;}
.al-avail-bar-fill--amber{background:#F59E0B;}
.al-avail-bar-fill--red{background:#DC2626;}
.al-avail-bar-fill--grey{background:#D1D5DB;}
.al-avail-value{font-size:12.5px;font-weight:700;white-space:nowrap;}
.al-avail-value--green{color:#0b8159;}
.al-avail-value--amber{color:#B45309;}
.al-avail-value--red{color:#DC2626;}
.al-avail-value--grey{color:#7a8190;}
.al-kpi-empty{font-size:12px;font-weight:400;color:#aab0ba;white-space:nowrap;}

/* ═══════════════════════════════════════════════════════════════
   Asset Field Layout  (extracted from tab-form-asset.html)
   ═══════════════════════════════════════════════════════════════ */
.af-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:8px;}
.af-bar-left,.af-bar-right{display:flex;align-items:center;gap:8px;}
.af-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid #e2e5eb;background:#fff;border-radius:9px;padding:8px 16px;font-size:13.5px;font-weight:700;color:#3a3f4a;cursor:pointer;transition:border-color .15s,color .15s,background .15s;white-space:nowrap;line-height:1;}
.af-btn:hover{border-color:#c9ccd2;color:#16181d;}
.af-btn:disabled{opacity:.5;cursor:default;}
.af-btn--edit{color:#6d4ce0;border-color:#d4cafc;background:#f4f1ff;}
.af-btn--edit:hover{border-color:#6d4ce0;background:#ede8ff;}
.af-btn--save{background:#138496;border-color:#138496;color:#fff;}
.af-btn--save:hover{background:#0d6d7e;border-color:#0d6d7e;}
.af-btn--cancel{color:#6b7280;}
.af-btn--cancel:hover{color:#16181d;border-color:#9ca3af;}
.af-btn--new-group{border:1.5px dashed #c0c4cc;color:#7a8190;background:transparent;}
.af-btn--new-group:hover{border-color:#6d4ce0;color:#6d4ce0;background:#f4f1ff;}
.af-groups-row{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:12px;}
.af-group{border-radius:14px;border:1.5px solid var(--af-gl);background:#fff;overflow:visible;min-width:0;position:relative;}
.af-group--teal{--af-gc:#0d6d7e;--af-ghb:#e8f4f8;--af-gl:#bee5eb;--af-gib:rgba(23,162,184,.12);}
.af-group--purple{--af-gc:#6d4ce0;--af-ghb:#f4f1ff;--af-gl:#d4cafc;--af-gib:rgba(109,76,224,.10);}
.af-group--amber{--af-gc:#b45309;--af-ghb:#fff8ec;--af-gl:#fcd9a0;--af-gib:rgba(217,119,6,.12);}
.af-group--blue{--af-gc:#1d4ed8;--af-ghb:#eff6ff;--af-gl:#bfdbfe;--af-gib:rgba(59,130,246,.10);}
.af-group--rose{--af-gc:#be123c;--af-ghb:#fff1f2;--af-gl:#fecdd3;--af-gib:rgba(244,63,94,.10);}
.af-group--plain{--af-gc:#6b7280;--af-ghb:#f9fafb;--af-gl:#e5e7eb;--af-gib:rgba(107,114,128,.08);}
.af-group-head{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:var(--af-ghb);border-bottom:1.5px solid var(--af-gl);border-radius:13px 13px 0 0;}
.af-group-title{display:flex;align-items:center;gap:10px;}
.af-group-icon{width:26px;height:26px;border-radius:7px;background:var(--af-gib);color:var(--af-gc);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;flex-shrink:0;}
.af-group-name{font-size:13.5px;font-weight:800;color:var(--af-gc);}
.af-group-count{font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--af-gib);color:var(--af-gc);}
.af-group-collapse-btn{width:26px;height:26px;border:none;background:transparent;color:var(--af-gc);cursor:pointer;border-radius:6px;display:flex;align-items:center;justify-content:center;opacity:.55;font-size:11px;}
.af-group-collapse-btn:hover{opacity:1;background:var(--af-gib);}
.af-fields-grid{display:grid;grid-template-columns:repeat(3,1fr);}
.af-fields-grid .af-field-cell{border-top:1px solid var(--af-gl);}
.af-fields-grid .af-field-cell:not(:nth-child(3n)){border-right:1px solid var(--af-gl);}
.af-ungrouped-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1.5px solid #e2e5eb;border-radius:14px;margin-bottom:12px;overflow:visible;}
.af-ungrouped-grid .af-field-cell{border-top:1px solid #e2e5eb;}
.af-ungrouped-grid .af-field-cell:nth-child(-n+3){border-top:none;}
.af-ungrouped-grid .af-field-cell:not(:nth-child(3n)){border-right:1px solid #e2e5eb;}
.af-ungrouped-grid .af-field-cell:first-child{border-radius:13px 0 0 0;}
.af-ungrouped-grid .af-field-cell:nth-child(3){border-radius:0 13px 0 0;}
@media (max-width:900px){.af-ungrouped-grid{grid-template-columns:repeat(2,1fr);}
.af-ungrouped-grid .af-field-cell:nth-child(-n+3){border-top:1px solid #e2e5eb;}
.af-ungrouped-grid .af-field-cell:nth-child(-n+2){border-top:none;}
.af-ungrouped-grid .af-field-cell:not(:nth-child(3n)){border-right:none;}
.af-ungrouped-grid .af-field-cell:nth-child(odd){border-right:1px solid #e2e5eb;}
.af-ungrouped-grid .af-field-cell:nth-child(3){border-radius:0;}
.af-ungrouped-grid .af-field-cell:nth-child(2){border-radius:0 13px 0 0;}}
.af-field-cell{background:#fff;padding:11px 16px;display:flex;flex-direction:row;align-items:center;gap:12px;min-width:0;transition:background .12s;}
.af-field-cell:hover{background:#fafbfc;}
.af-field-cell.af-field-cell--formula{background:#f2f5f9;border-left:3px solid #138496 !important;}
.af-field-cell.af-field-cell--formula:hover{background:#edf1f7;}
.af-field-cell.af-field-cell--formula .af-field-label-text{color:#4b5563;}
.af-field-label{flex:0 0 160px;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#3a3f4a;}
.af-type-ic{width:24px;height:24px;border-radius:7px;background:#f1f2f5;color:#6b7280;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;}
.af-field-label-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3;}
.af-fx{font-size:10.5px;font-style:italic;font-weight:700;color:#0d6d7e;}
.af-label-sys{color:lightseagreen;font-size:9px;flex-shrink:0;}
.af-field-input{flex:1;display:flex;align-items:center;gap:8px;min-width:0;}
.af-input-wrap{flex:1;min-width:0;}
.af-input-wrap .form-control,.af-input-wrap input[type=text],.af-input-wrap input[type=number],.af-input-wrap input[type=email],.af-input-wrap input[type=date],.af-input-wrap input[type=datetime-local],.af-input-wrap select{border:1px solid #e7e9ee !important;border-radius:9px !important;padding:8px 13px !important;font-size:13.5px !important;height:auto !important;min-width:0;width:100%;background:#fafbfc !important;transition:border-color .15s,box-shadow .15s !important;}
.af-input-wrap .form-control:focus,.af-input-wrap input:focus{border-color:#138496 !important;box-shadow:0 0 0 3px rgba(23,162,184,.12) !important;background:#fff !important;}
.af-input-wrap .btn-link{font-size:13px;padding:4px 6px;}
.af-hist-btn{width:30px;height:30px;flex-shrink:0;border:1px solid #e7e9ee;background:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#d0d4db;font-size:12px;cursor:pointer;transition:border-color .15s,color .15s;}
.af-hist-btn:hover{border-color:#c9ccd2;color:#3a3f4a;}
.af-label-actions{display:inline-flex;gap:2px;margin-left:2px;}
.af-label-actions .btn{padding:0 3px;font-size:10px;line-height:1;}
.af-ungroup-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding:0 2px;}
.af-ungroup-head-line{height:1px;flex:1;background:#e7e9ee;}
.af-ungroup-head-label{font-size:11px;font-weight:700;color:#aab0ba;letter-spacing:.4px;white-space:nowrap;text-transform:uppercase;}
.af-groups-row--edit{align-items:stretch;}
.af-groups-list--edit{display:flex;flex-direction:column;gap:0;margin-bottom:12px;}
.af-group-head--edit{flex-wrap:nowrap;cursor:grab;}
.af-group-head--edit:active{cursor:grabbing;}
.af-group-drag-handle{color:#c0c4cc;font-size:15px;flex-shrink:0;letter-spacing:-2px;line-height:1;margin-right:4px;}
.af-group-dz{height:8px;margin:3px 8px;border-radius:6px;border:2px dashed transparent;background:transparent;transition:height .15s ease,border-color .15s,background .15s;display:none;}
.af-group-dragging .af-group-dz{display:block;border-color:#d6dae2;}
.af-group-dragging .af-group-dz.af-dz--active{height:40px !important;border-color:#138496 !important;background:rgba(23,162,184,.12) !important;}
.af-group-dragging .af-fields-edit .af-dz{display:none !important;}
.af-group-dragging .af-dz--pool{display:none !important;}
.af-group-name-input{flex:1;background:transparent;border:none;border-bottom:1.5px solid var(--af-gl);color:var(--af-gc);font-size:13.5px;font-weight:800;padding:1px 4px;outline:none;max-width:160px;}
.af-group-name-input:focus{border-bottom-color:var(--af-gc);}
.af-group-del-btn{width:24px;height:24px;border:none;background:transparent;color:#f87171;cursor:pointer;border-radius:5px;font-size:12px;display:flex;align-items:center;justify-content:center;}
.af-group-del-btn:hover{background:#fef2f2;}
.af-color-row{display:flex;align-items:center;gap:5px;flex-wrap:nowrap;}
.af-color-swatch{width:18px;height:18px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;flex-shrink:0;transition:transform .12s,border-color .12s;}
.af-color-swatch:hover{transform:scale(1.2);}
.af-color-swatch--active{border-color:#374151 !important;transform:scale(1.15);}
.af-color-swatch--teal{background:#0d6d7e;}
.af-color-swatch--purple{background:#6d4ce0;}
.af-color-swatch--amber{background:#b45309;}
.af-color-swatch--blue{background:#1d4ed8;}
.af-color-swatch--rose{background:#be123c;}
.af-icon-picker{display:flex;flex-wrap:wrap;gap:4px;padding:6px 8px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.1);position:absolute;z-index:100;margin-top:4px;max-width:220px;}
.af-icon-opt{width:28px;height:28px;border:1px solid #e5e7eb;border-radius:6px;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;color:#6b7280;transition:background .12s,color .12s,border-color .12s;}
.af-icon-opt:hover{background:#f0f8fa;color:#17A2B8;border-color:#17A2B8;}
.af-icon-opt--active{background:#e8f4f8;color:#17A2B8;border-color:#17A2B8;}
.af-fields-edit{padding:6px 10px 10px;}
.af-dz{height:4px;border-radius:4px;margin:3px 0;border:2px dashed transparent;background:transparent;transition:height .12s ease,border-color .12s,background .12s;box-sizing:border-box;}
.af-is-edit .af-dz{height:16px;border-color:#d6dae2;background:transparent;border-radius:6px;}
.af-dz.af-dz--active{height:36px !important;border-color:#138496 !important;background:rgba(23,162,184,.10) !important;border-radius:8px !important;}
.af-dz--pool{display:block;}
.af-drag-card{display:flex;align-items:center;gap:10px;padding:9px 12px;margin:0;background:#fff;border:1.5px solid #e7e9ee;border-radius:9px;cursor:grab;font-size:13px;color:#3a3f4a;transition:box-shadow .15s,border-color .15s;user-select:none;}
.af-drag-card:hover{border-color:#c9ccd2;box-shadow:0 1px 5px rgba(0,0,0,.07);}
.af-drag-card:active{cursor:grabbing;}
.af-drag-handle{color:#c0c4cc;font-size:15px;flex-shrink:0;letter-spacing:-2px;line-height:1;}
.af-drag-icon{font-size:12px;color:#9ca3af;flex-shrink:0;}
.af-drag-name{font-weight:700;flex:1;min-width:0;line-height:1.3;white-space:normal;word-break:break-word;}
.af-group-empty{margin:8px;padding:20px;border:1.5px dashed var(--af-gl);border-radius:9px;text-align:center;color:var(--af-gc);font-size:12.5px;opacity:.65;}
.af-skel{border-radius:7px;background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%);background-size:200% 100%;animation:cal-sk-shimmer 1.5s infinite linear;}
.af-skel--btn{height:34px;border-radius:9px;}
.af-skel--icon{width:26px;height:26px;border-radius:7px;flex-shrink:0;}
.af-skel--text{height:13px;border-radius:5px;}
.af-skel--input{height:36px;border-radius:9px;width:100%;}
.af-skel-wrap{padding:2px 0;}
.af-skel-bar{display:flex;align-items:center;gap:8px;margin-bottom:14px;}
.af-skel-grid{display:grid;grid-template-columns:repeat(3,1fr);background:#e2e5eb;gap:1px;border:1.5px solid #e2e5eb;border-radius:14px;overflow:hidden;}
@media (max-width:900px){.af-skel-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.af-skel-grid{grid-template-columns:1fr;}}
.af-skel-cell{background:#fff;padding:15px 20px;display:flex;flex-direction:column;gap:10px;}
.af-skel-cell-label{display:flex;align-items:center;gap:8px;}
.af-pool{border:1.5px dashed #d1d5db;border-radius:12px;padding:10px 12px;margin-bottom:12px;}
.af-pool-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.af-pool-title{font-size:12.5px;font-weight:700;color:#6b7280;}
.af-pool-hint{font-size:12px;color:#9ca3af;}
.af-pool-grid{display:block;}

/* Breakdown work order (CAFM) */
.breakdown-wo-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(15,23,42,.52);z-index:1050;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:22px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;}
.breakdown-wo-shell{background:linear-gradient(180deg,#F6F8FC 0%,#EEF1F7 100%);border:1px solid #E2E8F0;border-radius:14px;box-shadow:0 1px 3px rgba(15,23,42,.08),0 18px 48px rgba(15,23,42,.18);width:100%;max-width:1260px;max-height:calc(100vh - 44px);overflow:hidden;color:#0F172A;display:flex;flex-direction:column;}
.breakdown-wo-inline{position:static;background:transparent;z-index:auto;padding:0;display:block;overflow:visible;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;}
.breakdown-wo-shell-inline{max-width:none;box-shadow:0 2px 8px rgba(15,23,42,.06);border-radius:12px;}
.breakdown-wo-header{position:relative;background:#FFFFFF;color:#0F172A;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid #E2E8F0;}
.breakdown-wo-header-left{display:flex;align-items:center;gap:12px;}
.breakdown-wo-header-left h4{margin:0;font-size:18px;font-weight:700;color:#0F172A;}
.breakdown-wo-header-left p{margin:2px 0 0;font-size:13px;color:#64748B;}
.breakdown-wo-header-right{display:contents;}
.breakdown-wo-shell .breakdown-wo-header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 16px;align-items:start;}
.breakdown-wo-header-left{min-width:0;grid-column:1;grid-row:1;}
.breakdown-wo-actions{grid-column:2;grid-row:1;display:flex;align-items:center;gap:10px;white-space:nowrap;}
.breakdown-wo-metadata{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.5fr) minmax(0,.8fr) minmax(0,1.4fr);gap:12px 20px;}
.breakdown-wo-metadata .breakdown-wo-meta{display:block;min-width:0;text-align:left;}
.breakdown-wo-metadata .breakdown-wo-meta-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media(max-width:700px){.breakdown-wo-metadata{grid-template-columns:repeat(2,minmax(0,1fr));}.breakdown-wo-shell .breakdown-wo-header{padding:12px;gap:12px 8px;}.breakdown-wo-actions{gap:4px;}.breakdown-wo-header-left p{font-size:12px;}}
.breakdown-wo-meta{text-align:right;}
.breakdown-wo-meta-label{font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:#64748B;}
.breakdown-wo-meta-value{font-size:14px;font-weight:700;color:#0F172A;}
.breakdown-wo-meta-value a{color:#0F172A;}
.breakdown-wo-header .btn-outline-warning{padding:8px 14px;border:1px solid #E2E8F0;border-radius:8px;background:#FFFFFF;color:#0F172A;font-size:12px;font-weight:600;}
.breakdown-wo-header .btn-close{position:static;background:transparent;border:none;color:#0F172A;font-size:16px;opacity:.8;}
.breakdown-wo-header .btn-close:hover{opacity:1;}
.breakdown-wo-header .breakdown-dismiss-btn,.breakdown-wo-header .breakdown-dismiss-btn:hover,.breakdown-wo-header .breakdown-dismiss-btn:focus,.breakdown-wo-header .breakdown-dismiss-btn:active{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;min-width:24px;padding:0;border:0;border-radius:0;background:transparent;color:#DC2626;opacity:1;transform:none;box-shadow:none;transition:none;}
.breakdown-wo-stepper{display:flex;flex-wrap:nowrap;flex-shrink:0;gap:6px;padding:10px 16px 8px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#CBD5E1 transparent;background:transparent;border:0;}
.breakdown-step{display:flex;flex:0 0 auto;align-items:center;gap:6px;padding:5px 9px;min-height:44px;white-space:nowrap;line-height:1.3;border-radius:20px;border:1px solid #E2E8F0;background:#FFFFFF;font-family:inherit;font-size:13px;font-weight:600;color:#64748B;cursor:pointer;}
.breakdown-step-text{display:flex;flex-direction:column;align-items:flex-start;gap:2px;}
.breakdown-step .breakdown-skipped-label{padding:0;background:transparent;font-size:11px;line-height:1.2;}
.breakdown-step:focus-visible{outline:2px solid #138496;outline-offset:2px;}
.breakdown-step-dot{width:18px;height:18px;flex-shrink:0;border-radius:50%;background:#F1F5F9;color:#64748B;font-size:11px;display:flex;align-items:center;justify-content:center;font-weight:800;}
.breakdown-step.active{border-color:#17A2B8;color:#17A2B8;background:#FFFFFF;box-shadow:0 0 0 3px rgba(23,162,184,.10);}
.breakdown-step.active .breakdown-step-dot{background:#17A2B8;color:#FFFFFF;}
.breakdown-step.done{border-color:#BFE6CD;color:#0F9D58;}
.breakdown-step.skipped{border-color:#CBD5E1;color:#64748B;}
.breakdown-step.skipped .breakdown-step-dot{background:#E2E8F0;color:#475569;}
.breakdown-skipped-label{display:inline-block;padding:2px 7px;border-radius:4px;background:#F1F5F9;color:#475569;font-size:12px;font-weight:600;}
.breakdown-step.done .breakdown-step-dot{background:#0F9D58;color:#FFFFFF;}
.breakdown-wo-body{display:flex;gap:22px;padding:16px 22px 22px;align-items:stretch;flex:1;min-height:0;overflow:hidden;}
.breakdown-wo-main{flex:1;min-width:0;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;}
.breakdown-wo-side{width:388px;flex-shrink:0;display:flex;flex-direction:column;gap:14px;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;}
.breakdown-wo-main::-webkit-scrollbar,.breakdown-wo-side::-webkit-scrollbar{display:none;}

.breakdown-summary{padding:24px;background:#F6F8FB;flex:1;min-height:0;overflow-y:auto;}
.breakdown-wo-actions .breakdown-print-button{display:inline-flex;align-items:center;gap:6px;border-radius:8px;padding:8px 12px;font-size:13px;font-weight:700;white-space:nowrap;color:white;background:#17a2b8;border:0;box-shadow:0 2px 6px rgba(23,162,184,.18);}
.breakdown-wo-actions .breakdown-print-button:hover{background:#138496;}
.breakdown-wo-actions .breakdown-print-button:focus-visible{outline:2px solid #138496;outline-offset:2px;}
.breakdown-summary-header h3{margin:0 0 4px;font-size:20px;font-weight:600;color:#1A2B3C;}
.breakdown-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:16px;margin-top:16px;align-items:start;}
.breakdown-summary-grid > .breakdown-summary-section:not(:has(> div)){padding:12px 16px;}
.breakdown-summary-grid > .breakdown-summary-section:not(:has(> div)) h5{display:inline-block;margin:0 12px 0 0;}
.breakdown-summary-grid > .breakdown-summary-section:not(:has(> div)) .breakdown-skipped-label{margin:0 4px 0 0;}
.breakdown-report-heading{display:none;justify-content:space-between;align-items:flex-start;gap:16px;border-bottom:1px solid #E2E8F0;padding-bottom:16px;margin-bottom:16px;}
.breakdown-report-heading h2{font-size:20px;line-height:1.4;margin:4px 0;color:#0F172A;}
.breakdown-report-heading h2 span{font-weight:500;color:#475569;}
.breakdown-report-heading p{margin:4px 0;color:#64748B;font-size:13px;}
.breakdown-report-status{border:1px solid #B8DECB;background:#EFFAF4;color:#166534;border-radius:6px;padding:6px 10px;font-size:12px;font-weight:600;}
.breakdown-summary-section{background:#FFFFFF;border:1px solid #E2E8F0;border-radius:12px;box-shadow:0 2px 6px rgba(15,23,42,.05);padding:16px;min-width:0;overflow-wrap:anywhere;word-wrap:break-word;}
.breakdown-summary-section h5{margin:0 0 10px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#374151;}
.breakdown-summary-section > div{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-size:13px;color:#111827;border-bottom:1px solid #EEF0F2;}
.breakdown-summary-section > div:last-child{border-bottom:none;}
.breakdown-summary-section > div > span{color:#6B7280;flex-shrink:0;}
.breakdown-summary-grid > .breakdown-summary-section > div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);white-space:pre-wrap;}
.breakdown-summary-grid > .breakdown-summary-section > div > span{min-width:0;white-space:normal;}
.breakdown-char-count{display:block;margin-top:4px;text-align:right;}
.breakdown-summary-grid > .breakdown-summary-section > .breakdown-summary-narrative{display:block;grid-column:1/-1;margin-top:8px;padding-top:10px;white-space:normal;}
.breakdown-summary-narrative > span{display:block;margin-bottom:6px;color:#6B7280;font-weight:600;}
.breakdown-summary-narrative-text{line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;}
.breakdown-summary-narrative.collapsible:not(.expanded) .breakdown-summary-narrative-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden;}
.breakdown-summary-narrative-toggle{display:block;padding:4px 0 0;font-size:12px;}
.breakdown-summary-kpis{margin-top:0;background:#F1F5F9;}
.breakdown-summary-section > .breakdown-summary-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(max(145px,calc((100% - 48px)/5)),1fr));gap:12px;border:0;}
.breakdown-summary-kpi-grid > div{display:flex;flex-direction:column;gap:8px;justify-content:space-between;min-width:0;font-size:14px;font-weight:600;color:#1A2B3C;background:#FFFFFF;border:1px solid #E2E8F0;border-radius:8px;box-shadow:0 2px 5px rgba(15,23,42,.05);padding:12px;border-left:3px solid #D1D5DB;}
.breakdown-summary-kpi-grid > div > span{color:#6B7280;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.03em;}
.breakdown-summary-kpi-grid .bd-kpi-mttd{border-left-color:#17a2b8;}
.breakdown-summary-kpi-grid .bd-kpi-mtta{border-left-color:#7C3AED;}
.breakdown-summary-kpi-grid .bd-kpi-respond{border-left-color:#0891B2;}
.breakdown-summary-kpi-grid .bd-kpi-repair{border-left-color:#EA580C;}
.breakdown-summary-kpi-grid .bd-kpi-resolve{border-left-color:#059669;}
.breakdown-summary-kpi-grid .bd-kpi-downtime{border-left-color:#DC2626;}
.breakdown-summary-kpi-grid .bd-kpi-availability{border-left-color:#00B8A9;}
.breakdown-summary-kpi-grid .bd-kpi-cost{border-left-color:#4B5563;}
.breakdown-summary-kpi-grid .bd-kpi-good{color:#059669;border-left-color:#059669;}
.breakdown-summary-kpi-grid .bd-kpi-bad{color:#DC2626;border-left-color:#DC2626;}

.breakdown-summary-section{transition:border-color .15s,box-shadow .15s;}
.breakdown-summary-section.active{border-color:#17a2b8;box-shadow:0 0 0 1px #17a2b8;}
.breakdown-summary-section > div.bd-row-active{background:#EFF6FF;border-radius:4px;padding-left:6px;padding-right:6px;margin:0 -6px;}
.bd-section-raise h5{color:#17a2b8;}
.bd-section-ack h5{color:#7C3AED;}
.bd-section-repair h5{color:#EA580C;}
.bd-section-cost h5{color:#4B5563;}
.breakdown-summary-history{margin-top:16px;}
@media screen and (max-width:700px){
  .breakdown-summary{padding:16px;}
  .breakdown-summary-grid{grid-template-columns:minmax(0,1fr);}
}

@media print{
  /* Shared by sibling apps: isolate printing only when a breakdown report exists. */
  body:where(:has(.breakdown-summary)) *{visibility:hidden;}
  .breakdown-summary, .breakdown-summary *{visibility:visible;}
  /* .breakdown-summary is nested inside the fixed-position overlay and an
     overflow:hidden shell sized for the on-screen modal — without resetting
     those, the printed report is clipped to one viewport-height box instead
     of paginating, showing blank/cut-off pages. */
  .breakdown-wo-overlay{position:static!important;overflow:visible!important;background:none!important;padding:0!important;display:block!important;}
  .breakdown-wo-shell{overflow:visible!important;box-shadow:none!important;max-width:none!important;border-radius:0!important;}
  /* Remove off-report layout space and reset every scroll/fixed ancestor.
     Keep the report in normal flow so long notes and history paginate. */
  body:has(.breakdown-summary) *:not(:has(.breakdown-summary)):not(.breakdown-summary):not(.breakdown-summary *){display:none!important;}
  html:has(.breakdown-summary), body:has(.breakdown-summary), body:has(.breakdown-summary) *:has(.breakdown-summary){position:static!important;display:block!important;width:100%!important;min-width:0!important;max-width:none!important;float:none!important;flex:none!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;margin:0!important;padding:0!important;transform:none!important;}
  .breakdown-summary{position:static!important;height:auto!important;max-height:none!important;overflow:visible!important;width:100%;padding:0;flex:none;font-size:10pt;}
  .breakdown-report-heading{display:flex;}
  .breakdown-summary{background:white;}
  .breakdown-summary-grid{display:block;}
  .breakdown-summary-section{background:white;box-shadow:none;margin:0 0 4mm;padding:3mm;border-color:#CBD5E1;}
  .breakdown-summary-section h5{break-after:avoid;}
  .breakdown-summary-grid > .breakdown-summary-section > div,.breakdown-summary-history li{break-inside:avoid;}
  .breakdown-summary-section > .breakdown-summary-kpi-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:2mm;}
  .breakdown-summary-kpi-grid > div{break-inside:avoid;font-size:10pt;padding:2mm;box-shadow:none;}
  .breakdown-summary-kpi-grid > div > span{font-size:8pt;}
  .breakdown-report-heading{break-inside:avoid;break-after:avoid;}
  .breakdown-summary-narrative-text{display:block!important;overflow:visible!important;-webkit-line-clamp:unset!important;}
  .breakdown-summary-narrative-toggle{display:none!important;}
}
.breakdown-card{overflow:hidden;background:#FFFFFF;border:1px solid #E2E8F0;border-radius:14px;box-shadow:0 1px 3px rgba(15,23,42,.08),0 8px 24px rgba(15,23,42,.06);padding:0;margin-bottom:14px;transition:opacity .2s,filter .2s,border-color .2s,box-shadow .2s;}
.breakdown-card.open{padding:0;}
.breakdown-card.locked{opacity:.55;filter:grayscale(.3);}
.breakdown-card-header{display:flex;align-items:center;gap:12px;min-height:56px;padding:14px 18px;font-size:16px;font-weight:700;color:#0F172A;cursor:pointer;user-select:none;}
.breakdown-card.open .breakdown-card-header{margin-bottom:0;}
.breakdown-card.locked .breakdown-card-header{cursor:not-allowed;}
.breakdown-card-body{display:none;}
.breakdown-card.open .breakdown-card-body{display:block;padding:2px 18px 18px;}
.breakdown-card.open .breakdown-card-body::after{display:block;clear:both;content:"";}
.breakdown-card-num{width:26px;height:26px;border-radius:8px;background:#EAF8FA;color:#17A2B8;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:800;}
.breakdown-card.done .breakdown-card-num{background:#E3F5EA;color:#0F9D58;}
.breakdown-card-tag{margin-left:auto;font-size:12px;font-weight:700;letter-spacing:0;color:#17A2B8;background:#EAF8FA;padding:4px 9px;border-radius:20px;}
.breakdown-card.done .breakdown-card-tag{background:#E3F5EA;color:#0F9D58;}
.breakdown-card label{display:block;font-size:12.5px;font-weight:600;color:#64748B;margin:0 0 5px;}
.breakdown-required{color:#DC2626;font-size:14px;font-weight:800;line-height:1;}
.breakdown-card .form-group{margin-bottom:11px;}
.breakdown-wo-shell .breakdown-card input.form-control,
.breakdown-wo-shell .breakdown-card select.form-control,
.breakdown-wo-shell .breakdown-card textarea.form-control{width:100%!important;height:40px!important;margin:0!important;padding:9px 11px!important;box-sizing:border-box!important;border:1px solid #E2E8F0!important;border-bottom:1px solid #E2E8F0!important;border-radius:9px!important;background:#FFFFFF!important;box-shadow:none!important;font-size:14px;line-height:20px;color:#0F172A;outline:none!important;transition:border-color .15s,box-shadow .15s,background-color .15s;}
.breakdown-card .form-control::placeholder{color:#94A3B8;opacity:1;}
.breakdown-wo-shell .breakdown-card .form-control:hover:not(:disabled):not(:focus){border-color:#CBD5E1!important;}
.breakdown-wo-shell .breakdown-card .form-control:focus{border-color:#17A2B8!important;box-shadow:0 0 0 3px rgba(23,162,184,.12)!important;outline:none!important;}
.breakdown-wo-shell .breakdown-card .form-control:disabled,.breakdown-wo-shell .breakdown-card .form-control[readonly]{background:#F1F5F9!important;color:#64748B;cursor:not-allowed;}
.breakdown-card-body > .row{margin-left:-6px;margin-right:-6px;}
.breakdown-card-body > .row > [class*="col-"]{padding-left:6px;padding-right:6px;}
.breakdown-wo-shell .breakdown-card textarea.form-control{height:auto!important;min-height:76px;resize:vertical;}
.breakdown-card .input-group .input-group-text{height:40px;border-radius:9px 0 0 9px;border:1px solid #E2E8F0;border-right:none;background:#F8FAFC;color:#64748B;font-size:14px;}
.breakdown-wo-shell .breakdown-card .input-group .form-control{border-radius:0 9px 9px 0!important;}
.breakdown-card .checkbox label{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:500;color:#1A2B3C;}
.breakdown-card .checkbox input[type="checkbox"]{width:16px;height:16px;margin:0;}
.breakdown-stage-saved{background:#F0FDF9;border:1px solid #99F2DE;}
.breakdown-stage-saved p{margin:0 0 16px;font-size:14px;color:#1A2B3C;}
.breakdown-stage-saved p .fa-check-circle{margin-right:6px;}
.breakdown-saved-banner{background:#F0FDF9;border:1px solid #99F2DE;border-radius:8px;padding:12px 16px;margin-bottom:16px;font-size:13px;color:#1A2B3C;}
.breakdown-saved-banner .fa-check-circle{margin-right:6px;}
.breakdown-saved-banner a{margin-left:10px;display:inline-block;border:1px solid #D1D5DB;border-radius:4px;padding:4px 12px;color:#1A2B3C;background:#FFFFFF;}
.breakdown-saved-banner a:hover{background:#F3F4F6;text-decoration:none;}
.breakdown-card .form-group.has-error .form-control{border-color:#DC2626!important;background:#FEF2F2;}
.breakdown-card .form-group.has-error label{color:#DC2626;}
.breakdown-subhead{font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#64748B;border-top:1px dashed #E2E8F0;padding-top:10px;margin:14px 0 8px;}
.breakdown-asset-search{position:relative;}
.breakdown-asset-options{position:absolute;z-index:5;left:0;right:0;background:#FFFFFF;border:1px solid #E2E8F0;border-radius:9px;box-shadow:0 8px 24px rgba(15,23,42,.12);max-height:180px;overflow-y:auto;margin:4px 0 0;padding:4px 0;list-style:none;}
.breakdown-asset-options li{padding:8px 12px;font-size:14px;color:#374151;cursor:pointer;}
.breakdown-asset-options li:hover{background:#F8FAFC;}
.breakdown-asset-detail{display:grid;grid-template-columns:repeat(5,1fr);gap:13px;background:#F8FAFC;border:1px dashed #E2E8F0;border-radius:10px;padding:10px 14px;margin-bottom:12px;}
.breakdown-asset-detail div{display:flex;flex-direction:column;}
.breakdown-asset-detail span{font-size:10px;letter-spacing:.4px;text-transform:uppercase;color:#64748B;margin-bottom:2px;}
.breakdown-card .btn{min-height:38px;padding:8px 15px;border-radius:9px;font-size:13.5px;font-weight:700;box-shadow:none;}
.breakdown-card .btn-primary-dark,.breakdown-card .btn-success{border-color:#17A2B8;background:#17A2B8;color:#FFFFFF;}
.breakdown-card .btn-primary-dark:hover,.breakdown-card .btn-success:hover{border-color:#138496;background:#138496;}
.breakdown-card .btn-default{border:1px solid #E2E8F0;background:#FFFFFF;color:#17A2B8;}
.breakdown-card .btn-default:hover{background:#F8FAFC;}
.breakdown-card .btn-link{color:#64748B;}
.breakdown-kpi-panel{display:flex;flex-direction:column;gap:14px;}
.breakdown-kpi-card{background:#FFFFFF;border:1px solid #E2E8F0;border-radius:14px;box-shadow:0 1px 3px rgba(15,23,42,.08),0 8px 24px rgba(15,23,42,.06);padding:15px;}
.breakdown-kpi-card-primary{background:#FFFFFF;}
.breakdown-kpi-card-primary .breakdown-kpi-card-title{color:#64748B;}
.breakdown-kpi-card-title{font-size:13px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#64748B;margin-bottom:11px;}
.breakdown-kpi-availability{background:#FFFFFF;border:1px solid #E2E8F0;border-radius:10px;padding:12px;margin-bottom:9px;}
.breakdown-kpi-availability-label{color:#64748B;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;margin-bottom:7px;}
.breakdown-kpi-availability-bar{height:6px;border-radius:9999px;background:#E2E8F0;overflow:hidden;}
.breakdown-kpi-availability-fill{height:100%;width:100%;background:#00B8A9;border-radius:9999px;}
.breakdown-kpi-availability-fill.breached{background:#DC2626;}
.breakdown-kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.breakdown-kpi-grid-2{margin-bottom:8px;}
.breakdown-kpi-tile{background:#F8FAFC;border:1px solid #E2E8F0;border-radius:10px;padding:9px;}
.breakdown-kpi-card-primary .breakdown-kpi-tile{background:#F8FAFC;}
.breakdown-kpi-tile-wide{grid-column:1/-1;}
.breakdown-kpi-tile-label{font-size:11.5px;color:#64748B;margin-bottom:3px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;}
.breakdown-kpi-card-primary .breakdown-kpi-tile-label{color:#64748B;}
.breakdown-kpi-tile-value{font-size:18px;font-weight:800;color:#0F172A;}
.breakdown-kpi-card-primary .breakdown-kpi-tile-value{color:#0F172A;}
.breakdown-timeline{list-style:none;margin:0;padding:0;}
.breakdown-timeline li{position:relative;padding:0 0 12px 18px;font-size:13px;color:#0F172A;border-left:2px solid #E2E8F0;margin-left:4px;}
.breakdown-timeline li:last-child{padding-bottom:0;border-color:transparent;}
.breakdown-timeline-dot{position:absolute;left:-6px;top:2px;width:10px;height:10px;border-radius:50%;border:2px solid #17A2B8;background:#FFFFFF;}
@media (max-width:980px){.breakdown-wo-shell{max-height:none;}.breakdown-wo-body{flex-direction:column;overflow:visible;}.breakdown-wo-main,.breakdown-wo-side{overflow:visible;}.breakdown-wo-side{width:100%;}.breakdown-asset-detail{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.breakdown-wo-overlay{padding:0;}.breakdown-wo-shell{border-radius:0;}.breakdown-wo-header{align-items:flex-start;padding:14px 16px;}.breakdown-wo-header-right{gap:8px;flex-wrap:wrap;justify-content:flex-end;}.breakdown-wo-meta{display:none;}.breakdown-wo-stepper{padding:12px 12px 0;}.breakdown-wo-body{padding:12px;}.breakdown-card-header{padding:13px 14px;}.breakdown-card.open .breakdown-card-body{padding:2px 14px 14px;}.breakdown-summary-grid,.breakdown-summary-kpi-grid{grid-template-columns:1fr;}}

.al-table .al-th-avail, .al-table .al-td-avail { width: 1%; white-space: nowrap; }
.al-avail-actions { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.al-avail-actions > asset-kpi-refresh { display: inline-flex; flex: 0 0 auto; }
.al-table .al-th-actions, .al-table .al-td-actions { width: 42px; padding: 4px 8px; text-align: right; }
.al-refresh-kpi {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0; border: 1px solid #dce3ed;
    border-radius: 7px; background: #fff; color: #64748b; cursor: pointer;
    opacity: 0; pointer-events: none; transition: opacity .15s, background .15s;
}
.al-row:hover .al-refresh-kpi, .al-row:focus-within .al-refresh-kpi, .al-availability-stale .al-refresh-kpi, .al-refresh-kpi--error {
    opacity: 1; pointer-events: auto;
}
.al-refresh-kpi:hover { color: #138496; background: #eef8fa; border-color: #9dd4df; }
.al-refresh-kpi:focus-visible { outline: 2px solid #138496; outline-offset: 2px; }
.al-refresh-kpi:disabled { cursor: wait; }
.al-refresh-kpi.al-refresh-kpi--error { color: #dc2626; border-color: #fecaca; }

/* Asset register polish. Scoped so shared list/detail components retain their layout. */
.al-page-tooltip { position: fixed; z-index: 1080; max-width: min(260px, calc(100vw - 16px)); padding: 7px 10px; border-radius: 6px; background: #303740; color: #fff; font: 400 12px/1.4 Roboto, Arial, sans-serif; text-align: center; overflow-wrap: anywhere; box-shadow: 0 3px 10px rgba(0,0,0,.16); }
.al-page-tooltip[hidden] { display: none; }
/* Location toolbar: keep sorting with filters, with actions anchored right.
   On phone-sized screens reflow groups rather than shrinking readable text. */
.location-page .ft-filter-toolbar { flex-wrap: nowrap; gap: 12px; }
.location-page .ft-filter-toolbar > .ft-filter-controls { flex: 1 1 auto; flex-wrap: nowrap; gap: 8px; }
.location-page .ft-filter-toolbar input[type="search"] { flex: 0 1 260px; width: 260px !important; min-width: 110px; }
.location-page .ft-filter-toolbar .location-sort { flex: 0 0 145px; width: 145px !important; }
.location-page .ft-filter-toolbar .al-asset-count { flex: 0 0 auto; white-space: nowrap; font-size: 12px; }
.location-page .ft-filter-toolbar > .ft-filter-actions { flex: 0 0 auto; margin-left: auto; }
.location-page .ft-filter-toolbar .ft-filter-actions > .row { flex-wrap: nowrap; }
.location-page .ft-filter-toolbar .btn { white-space: nowrap; }
@media (max-width: 1100px) {
  .location-page .ft-filter-toolbar [custom-select] { flex-basis: 125px; width: 125px !important; }
  .location-page .ft-filter-toolbar .location-sort { flex-basis: 125px; width: 125px !important; }
}
@media (max-width: 900px) {
  .location-page .ft-filter-toolbar { flex-wrap: wrap; }
  .location-page .ft-filter-toolbar > .ft-filter-controls { flex-wrap: wrap; }
}

/* Shared opt-in list filters. Soft-service consumes these Kaizen templates/styles.
   Keep edit forms, modal fields, dropdown options and status colours unchanged. */
.ft-filter-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding: 8px 0 12px !important; margin: 0 0 12px; min-width: 0;
  border-bottom: 1px solid #e5e7eb; background: #fff;
}
.ft-filter-toolbar > [class*="col-"] { flex: 1 1 260px; width: auto; max-width: 100%; min-width: 0; padding: 0; }
.ft-filter-toolbar .ft-filter-controls,
.ft-filter-toolbar > .filter-stat { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
.ft-filter-toolbar > .ft-filter-controls { flex: 1 1 540px; }
.ft-filter-toolbar > .ft-filter-actions { flex: 0 1 auto; margin-left: auto; }
.ft-filter-toolbar .ft-filter-actions > .row { margin: 0; padding: 0 !important; gap: 8px; flex-wrap: wrap; }
.ft-filter-toolbar .ft-filter-controls > * { margin: 0 !important; }
.ft-filter-toolbar input:is([type="search"], [type="text"], [type="date"]):not(.modal *),
.ft-filter-toolbar select:not(.modal *) {
  box-sizing: border-box; height: 38px !important; min-width: 0;
  width: min(100%, 260px) !important; max-width: 100%; margin-top: 0 !important;
  padding: 8px 12px !important; border: 1px solid #d5d9df !important;
  border-radius: 8px !important; background-color: #fff; color: #374151; font-size: 13px; box-shadow: none;
}
.ft-filter-toolbar input::placeholder { color: #68727e; opacity: 1; }
.ft-filter-toolbar [custom-select]:not(.modal *) { flex: 0 1 160px; width: 160px !important; min-width: 120px; max-width: 100%; padding: 0 !important; }
.ft-filter-toolbar [custom-select] > .dropdown-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 38px; width: 100%; box-sizing: border-box; padding: 8px 12px; margin: 0;
  border: 1px solid #d5d9df; border-radius: 8px; background: #fff; color: #374151; font-size: 13px; text-decoration: none;
}
.ft-filter-toolbar [custom-select] > .dropdown-toggle > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ft-filter-toolbar [custom-select] > .dropdown-toggle::after { display: none; }
.ft-filter-toolbar [custom-select] > .dropdown-toggle > b { position: static; width: auto; height: auto; flex-shrink: 0; }
.ft-filter-toolbar [custom-select] > .dropdown-toggle > b::before { position: static; }
.ft-filter-toolbar [custom-select] .dropdown-menu { min-width: min(240px, calc(100vw - 40px)); max-width: calc(100vw - 32px); border-radius: 8px; border-color: #d5d9df; box-shadow: 0 6px 18px rgba(15,23,42,.1); }
.ft-filter-toolbar [custom-select] .cs-custom-select-search input { width: 100% !important; height: 34px !important; }
.ft-filter-toolbar .btn:not(.modal *):not(.dropdown-menu *) { min-height: 38px; border-radius: 8px; font-size: 13px; padding: 8px 12px; box-shadow: none; }
.ft-filter-toolbar .btn-group { gap: 0; }
.ft-filter-toolbar .btn-group > .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.ft-filter-toolbar .btn-group > .btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ft-filter-toolbar .ft-filter-actions .btn { margin: 0 !important; }
.ft-filter-toolbar .ft-filter-clear { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 8px 12px; border: 1px solid #d5d9df; border-radius: 8px; background: #fafbfc; color: #56616e; font-size: 13px; white-space: nowrap; }
.ft-filter-toolbar :is(input, select, button, a, [tabindex]):focus-visible { outline: 2px solid #138496; outline-offset: 2px; }
.ft-filter-toolbar input:focus:not(.modal *), .ft-filter-toolbar select:focus:not(.modal *) { border-color: #138496 !important; }
.ft-filter-toolbar .btn:disabled { opacity: .5; cursor: not-allowed; }
.ft-filter-toolbar .filter-stat-opt { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.ft-filter-toolbar .filter-btn { border-radius: 8px; }
/* Keep the create action on the controls row, not stranded below statuses. */
.work-list-filter-row.ft-filter-toolbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}
.work-list-filter-row.ft-filter-toolbar > .work-list-filter-controls {
    grid-column: 1;
    grid-row: 1;
    max-width: 100%;
    flex-wrap: nowrap;
    gap: 6px;
}
.work-list-filter-row.ft-filter-toolbar .work-list-filter-controls > input[type="search"] {
    width: clamp(120px, 11vw, 180px) !important;
    flex: 0 1 180px;
}
.work-list-filter-row.ft-filter-toolbar .work-list-filter-controls > [custom-select] {
    width: 140px !important;
    flex: 0 1 140px;
}
.work-list-filter-row .work-list-filter-controls > .align-content-center {
    display: flex;
    gap: 4px;
    white-space: nowrap;
}
.work-list-filter-row.ft-filter-toolbar .work-list-filter-controls > .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 38px;
}
.work-list-filter-row.ft-filter-toolbar .filter-btn {
    flex-shrink: 0;
    margin: 0;
    padding: 5px 6px;
    font-size: 12px;
    white-space: nowrap;
}
.work-list-filter-row.ft-filter-toolbar > .work-list-filter-status { display: contents !important; }
.work-list-filter-row .work-list-filter-status > .filter-stat-opt {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    flex-wrap: nowrap;
    white-space: nowrap;
    justify-self: end;
    max-width: 100%;
    overflow-x: auto;
    gap: 5px;
    padding: 4px;
}
.work-list-filter-row .work-list-create-action {
    grid-column: 3;
    grid-row: 1;
    margin: 0 !important;
    justify-self: end;
    align-self: center;
}
.work-list-create-action .btn { white-space: nowrap; }
@media (max-width: 1099.98px) {
    .work-list-filter-row.ft-filter-toolbar { grid-template-columns: minmax(0, 1fr) auto; }
    .work-list-filter-row.ft-filter-toolbar > .work-list-filter-controls { flex-wrap: wrap; }
    .work-list-filter-row .work-list-create-action { grid-column: 2; }
    .work-list-filter-row .work-list-filter-status > .filter-stat-opt {
        grid-column: 1 / -1;
        grid-row: 2;
        max-width: 100%;
        overflow-x: auto;
        padding: 4px 2px;
        justify-self: stretch;
    }
}
@media (max-width: 575.98px) {
    .work-list-filter-row.ft-filter-toolbar { gap: 8px; padding: 12px 8px !important; }
    .work-list-filter-row.ft-filter-toolbar .work-list-filter-controls > input[type="search"] {
        min-width: 0;
        width: 100% !important;
        max-width: 100%;
    }
}
.ft-filter-toolbar .vendor-modern-search { width: 100% !important; padding-left: 38px !important; padding-right: 38px !important; }
.ft-filter-toolbar.report-search input { width: 100% !important; }
.ft-calendar-filters .calendar-filter-dropdown .dropdown-toggle { min-height: 38px; border: 1px solid #d5d9df; border-radius: 8px; background: #fff; color: #374151; font-size: 13px; box-shadow: none; }
.ft-calendar-filters .calendar-filter-dropdown .dropdown-menu { border-radius: 8px; border-color: #d5d9df; max-width: calc(100vw - 32px); box-shadow: 0 6px 18px rgba(15,23,42,.1); }
.ft-calendar-filters .calendar-filter-dropdown .dropdown-menu input { min-height: 34px; border: 1px solid #d5d9df; border-radius: 6px; }
.ft-calendar-filters button:focus-visible { outline: 2px solid #138496; outline-offset: 2px; }
@media (max-width: 767px) {
  .ft-filter-toolbar > [class*="col-"] { flex-basis: 100%; }
  .ft-filter-toolbar > .ft-filter-actions { margin-left: 0; }
  .ft-filter-toolbar .ft-filter-actions > .row { justify-content: flex-start !important; }
  .ft-filter-toolbar input:is([type="search"], [type="text"]):not(.modal *) { width: 100% !important; flex-basis: 100%; }
  .ft-filter-toolbar [custom-select]:not(.modal *) { flex: 1 1 140px; }
}
.al-page-view { margin-top: var(--al-header-height, 56px) !important; padding-top: 0 !important; }
.al-directory { padding: 12px 18px 0; }
.al-directory .al-toolbar { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px 20px; padding: 0 0 12px; margin-bottom: 12px; border-bottom: 1px solid #e5e7eb; }
.al-toolbar-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; flex: 1 1 740px; min-width: 0; }
.al-directory .al-search { position: relative; flex: 1 1 240px; max-width: 330px; min-width: 200px; }
.al-directory input.al-search-input { width: 100% !important; height: 38px !important; margin: 0 !important; padding: 8px 12px 8px 38px !important; border: 1px solid #d5d9df !important; border-radius: 8px !important; background: #fff; font-size: 13px; color: #374151; box-shadow: none; }
.al-directory .al-search-input::placeholder { color: #68727e; opacity: 1; }
.al-search-submit { position: absolute; z-index: 1; left: 1px; top: 1px; width: 35px; height: 36px; border: 0; border-radius: 7px; color: #68727e; background: transparent; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.al-directory input.al-search-input { padding-right: 36px !important; }
.al-search-clear { position: absolute; right: 2px; top: 2px; width: 34px; height: 34px; border: 0; border-radius: 6px; background: transparent; color: #64748b; cursor: pointer; }
.al-search-results { position: absolute; z-index: 1050; top: calc(100% + 6px); left: 0; width: 100%; background: white; border: 1px solid #d5d9df; border-radius: 8px; box-shadow: 0 6px 18px rgba(15,23,42,.15); overflow: hidden; }
.al-search-option { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 8px 10px; font-size: 13px; cursor: pointer; }
.al-search-option strong { color: #138496; flex-shrink: 0; }
.al-search-option span { min-width: 0; overflow-wrap: anywhere; }
.al-search-option:hover, .al-search-option--active { background: #eaf6f8; }
.al-search-message { padding: 10px; font-size: 13px; color: #64748b; }
#asset-search-options { max-height: min(360px, 50vh); overflow-y: auto; }
.al-directory .al-filter { flex: 0 1 145px; width: 145px; min-width: 120px; margin: 0; }
.al-directory .al-filter > .dropdown-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 38px; width: 100%; box-sizing: border-box; padding: 8px 12px; margin: 0; border: 1px solid #d5d9df; border-radius: 8px; background: #fff; color: #374151; font-size: 13px; text-decoration: none; }
.al-directory .al-filter > .dropdown-toggle > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.al-directory .al-filter > .dropdown-toggle::after { display: none; }
.al-directory .al-filter > .dropdown-toggle > b { position: static; width: auto; height: auto; flex-shrink: 0; }
.al-directory .al-filter > .dropdown-toggle > b::before { position: static; }
.al-directory .al-filter .dropdown-menu { min-width: 240px; border-radius: 8px; border-color: #d5d9df; box-shadow: 0 6px 18px rgba(15,23,42,.1); }
.al-directory .al-filter .cs-custom-select-search input { height: 34px; border: 1px solid #d5d9df; border-radius: 6px; padding-left: 9px; color: #374151; font-size: 13px; }
.al-clear-filters { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 8px 12px; border: 1px solid #d5d9df; border-radius: 8px; background: #fff; color: #56616e; font-size: 13px; white-space: nowrap; cursor: pointer; }
.al-clear-filters:disabled { color: #7b8490; background: #fafbfc; cursor: default; }
.al-asset-count { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; color: #64707d; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.al-toolbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.al-directory .al-action, .al-toolbar-actions > formula-builder > span > a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; padding: 0; margin: 0 !important; border: 1px solid #d5d9df; border-radius: 8px; background: #fff; color: #64707d !important; box-shadow: none; cursor: pointer; }
.al-directory .al-action--primary { background: #138496; border-color: #138496; color: #fff !important; }
.al-directory .al-action:hover, .al-toolbar-actions > formula-builder > span > a:hover, .al-clear-filters:hover:not(:disabled) { background: #f0f8fa; border-color: #a3cbd2; color: #0d6d7e !important; }
.al-directory .al-action--primary:hover { background: #0d6d7e; border-color: #0d6d7e; color: #fff !important; }
.al-directory .al-search-input:focus { border-color: #138496 !important; outline: 2px solid rgba(19,132,150,.2); outline-offset: 1px; }
.al-toolbar button:focus-visible, .al-toolbar a:focus-visible { outline: 2px solid #138496; outline-offset: 3px; }
.al-directory .al-register-layout { margin: 0; }
.al-directory .al-register-detail { min-width: 0; padding: 0; }
@media (min-width: 768px) {
    .al-directory { display: flex; flex-direction: column; height: var(--al-directory-height, calc(100dvh - 80px)); box-sizing: border-box; }
    .al-directory .al-toolbar { flex-shrink: 0; }
    .al-directory .al-register-layout { flex: 1 1 0; min-height: 0; }
    .al-directory .al-register-scroll, .al-directory .al-register-detail { height: 100%; max-height: 100%; }
    .al-directory .al-register-layout--split { flex-wrap: nowrap; gap: 16px; }
    .al-directory .al-register-scroll--compact { flex: 0 0 clamp(280px, 32%, 400px); max-width: 400px; }
    .al-directory .al-register-layout--split > .al-register-detail { flex: 1 1 0; max-width: none; }
}
.al-directory .al-register-scroll { padding: 0; border: 1px solid #e2e5e9; border-radius: 10px; background: #fff; overflow: auto; }
.al-register-scroll .al-table { table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.al-register-scroll:not(.al-register-scroll--compact) .al-table { min-width: 960px; }
.al-register-scroll .al-table thead th { position: sticky; top: 0; z-index: 2; background: #f7f8f7; color: #5c6570; font-size: 11.5px; font-weight: 600; padding: 12px 14px; letter-spacing: .25px; }
.al-register-scroll .al-table .al-th-id { width: 150px; padding-left: 40px; }
/* Reserve utility widths; Category receives the remaining space rather than Location. */
.al-register-scroll .al-table .al-th-name { width: 20%; }
.al-register-scroll .al-table .al-th-loc { width: 20%; }
.al-register-scroll .al-table .al-th-cat { width: auto; }
.al-register-scroll:not(.al-register-scroll--compact) { container-type: inline-size; }
@container (min-width: 1200px) {
    .al-register-scroll .al-table .al-th-name { width: 30%; }
    .al-register-scroll .al-table .al-th-loc { width: 22%; }
}
.al-register-scroll .al-table .al-th-op { width: 140px; }
.al-register-scroll .al-table .al-th-avail { width: 220px; }
.al-register-scroll .al-row td { height: 46px; padding: 10px 14px; font-size: 13px; border-bottom-color: #eceef0; line-height: 1.45; }
.al-register-scroll .al-row td.al-td-id { padding-left: 14px; }
.al-register-scroll .al-row--child td.al-td-id { padding-left: 30px; }
.al-register-scroll .al-drag { display: none; }
.al-register-scroll .al-id { font-size: 11.5px; font-weight: 600; letter-spacing: 0; }
.al-register-scroll .al-td-name { color: #26313c; font-weight: 600; }
.al-register-scroll .al-td-loc, .al-register-scroll .al-td-cat { color: #626d79; }
.al-directory .al-cell-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-directory .al-cell-text:focus-visible { outline: 2px solid #138496; outline-offset: 2px; }
.al-register-scroll .al-td-loc .fa, .al-register-scroll .al-td-cat .fa { color: #8b949e; font-size: 12px; }
.al-register-scroll .al-op-badge { font-size: 11.5px; font-weight: 600; padding: 4px 9px; }
.al-register-scroll .al-op-badge .status-dot-pulse { animation: none; box-shadow: none; }
.al-register-scroll .al-avail-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.al-register-scroll .al-avail-bar { width: 52px; height: 5px; }
.al-directory .al-td-avail .al-avail-actions { display: flex; width: 100%; }
.al-directory .al-td-avail .al-refresh-kpi { opacity: 1; pointer-events: auto; }
.al-directory [asset-availability-trend] { display: inline-flex; align-items: center; flex: 1 1 0; min-width: 0; }
.al-directory [asset-availability-trend] .al-avail-cell { display: flex; width: 100%; min-width: 0; }
.al-directory [asset-availability-trend] .al-avail-value { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
.al-directory [asset-availability-trend] .al-avail-bar { flex: 1 1 0; min-width: 0; }
.al-directory .al-availability-trend { position: relative; display: inline-block; flex: 1 1 0; min-width: 0; height: 24px; }
.al-directory .al-availability-trend svg { display: block; width: 100%; height: 24px; overflow: visible; }
.al-directory .al-availability-trend.al-avail-value--green { color: #10B981; }
.al-directory .al-availability-trend.al-avail-value--amber { color: #F59E0B; }
.al-directory .al-availability-trend.al-avail-value--red { color: #DC2626; }
.al-directory .al-availability-trend.al-avail-value--grey { color: #D1D5DB; }
.al-directory .al-trend-point { position: absolute; top: 0; height: 24px; cursor: default; }
/* HTML overlay markers stay circular when the underlying SVG stretches. */
.al-directory .al-trend-marker {
    position: absolute; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; transform: translate(-50%, -50%);
    pointer-events: none; opacity: 0; box-sizing: border-box;
}
.al-directory .al-trend-marker--latest { opacity: 1; }
.al-directory .al-trend-point:hover .al-trend-marker {
    width: 10px; height: 10px; opacity: 1;
    border: 2px solid #fff; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
}
.al-directory .al-availability-trend:focus-visible { outline: 2px solid #138496; outline-offset: 3px; }
.al-register-scroll--compact .al-table .al-th-id { width: 136px; }
.al-register-scroll--compact .al-table .al-th-name { width: auto; }
.al-register-scroll--compact .al-table .al-th-actions { width: 48px; }
@media (max-width: 767px) {
    .al-directory { padding: 8px 4px 0; }
    .al-directory .al-register-scroll, .al-directory .al-register-detail { max-height: none; height: auto; }
    .al-directory .al-register-scroll { overflow-x: auto; overflow-y: hidden; }
    .al-directory .al-toolbar { gap: 12px; }
    .al-toolbar-filters { flex-basis: 100%; }
    .al-directory .al-search { flex-basis: 100%; max-width: none; }
    .al-directory .al-filter { flex: 1 1 130px; }
    .al-directory .al-filter .dropdown-menu { min-width: 240px; max-width: calc(100vw - 24px); }
    .al-directory [data-testid="kaizen-asset-location-filter"] .dropdown-menu { left: auto; right: 0; }
    .al-toolbar-actions { margin-left: 0; }
}
@media (hover: none) {
    .al-register-scroll .al-refresh-kpi { opacity: 1; pointer-events: auto; }
}

/* Application shell: Bootstrap's lg navbar otherwise stacks actions at tablet widths. */
.kaizen-app-header.navbar {
    flex-wrap: nowrap;
    align-items: center;
    min-height: 56px;
    gap: 8px;
}
.kaizen-app-header > .bars { display: none; }
.ls-closed .kaizen-app-header > .bars {
    display: block;
    position: relative;
    flex: 0 0 32px;
    height: 40px;
    margin-left: 8px;
}
.ls-closed .kaizen-app-header > .bars::before,
.ls-closed .kaizen-app-header > .bars::after {
    top: 8px;
    left: 4px;
    margin: 0;
}
.kaizen-app-header .kaizen-header-site {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    flex-wrap: nowrap;
    list-style: none;
}
.kaizen-app-header .kaizen-header-site-toggle {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 4px;
    white-space: nowrap;
    margin-left: 8px !important;
}
.kaizen-header-site-toggle > img {
    flex: 0 1 auto;
    max-width: 160px;
    object-fit: contain;
}
.kaizen-header-site-toggle > span { min-width: 0; }
.kaizen-header-site-toggle::after { flex-shrink: 0; }
.kaizen-app-header .kaizen-header-title {
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.kaizen-app-header .kaizen-header-actions {
    flex-direction: row;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 12px;
    white-space: nowrap;
}
.kaizen-header-actions > li {
    flex: 0 0 auto;
    margin: 0 !important;
    list-style: none;
}
.kaizen-header-actions > li > a { margin: 0; }
.kaizen-app-header > .portal-back-btn { flex: 0 0 auto; list-style: none; }
.kaizen-app-header > .portal-back-btn:empty { display: none; }
@media (max-width: 991.98px) {
    .kaizen-app-header .kaizen-header-title { display: none !important; }
    .kaizen-app-header .kaizen-header-site { flex: 1 1 auto; }
    .kaizen-app-header > .portal-back-btn { margin-left: 0 !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .kaizen-header-support-label { display: none; }
}
@media (max-width: 767.98px) {
    .kaizen-header-site-toggle > img { max-width: 100px; }
    .kaizen-app-header > .portal-back-btn { max-width: 100px; }
    .kaizen-app-header > .portal-back-btn a {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .kaizen-app-header > .js-search { flex: 0 0 24px; margin-top: 0 !important; }
}