@c8y/style/styles/components/navigation-and-layout/cards/_card-dashboard.less

Styles for Cumulocity IoT applications

@import "../../../mixins/_vendor-prefixes.less";

/**
 * Card Dashboard - Dashboard card component with widget containers
 *
 * Note: Uses @size-* tokens, @size-base, @component-padding, and @form-control-height-base.
 *
 * Intentionally hardcoded values:
 * - Component-specific dimensions (125px, 174px): Fixed header heights for specific layouts
 * - Percentages (100%): Layout and positioning
 * - Z-index values (9, 11): Stacking order
 * - Opacity values (0, 1): Visual states
 * - Calc expressions: Complex computed values with string.unquote for dynamic heights
 */

.card.card-dashboard {
  fill: @component-color-default;

  .card-title,
  .card-title span {
    // Inline .text-truncate styles (mixin not available in SCSS)
    display: block;
    overflow: hidden !important;
    max-width: 100% !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: var(--c8y-component-color-default, var(--c8y-root-component-color-default));
    pointer-events: none;
  }

  .card-title {
    display: flex;
  }

  c8y-dashboard-child-title {
    max-width: 100%;
    min-width: 0;
  }


  >.card-inner-scroll {
    position: relative;
    z-index: 9;
    height: calc(~'100% - @{size-48}');
    color: @component-color-default;
    container-type: size;

    &:before {
      background: @component-background-default;
    }

    // Removed unused state modifier class - verified 0 usages: .has-footer

    &:has(.inner-scroll) c8y-dynamic-component {
      display: flex;
      flex-direction: column;
      height: 100%;
      c8y-alarm-list-widget,c8y-alarms-list,c8y-event-list-widget,c8y-events-list{
        display: contents;
      }
  }

    >.component-map {
      position: relative;
      z-index: 11;
      height: 100%;
    }

    c8y-map-widget{
      flex-grow: 1;
    }
    c8y-kpi-widget-view{
      display: contents;
    }
  }

  >.fixed-header {
    .table {
      margin-bottom: 0;
    }

    +.card-inner-scroll {
      height: calc(~'100% - 125px');
    }

    &.datepicker {
      padding-top: @size-5;

      +.card-inner-scroll {
        height: calc(~'100% - 174px');
      }
    }
  }

  >.card-header-actions-no-title+.card-inner-scroll {
    height: 100%;
  }

  .card {
    margin-bottom: 0;

    .box-shadow(none);

    .card-inner-scroll {
      overflow: visible;
    }
  }

  .card-header-actions {
    .card-title {
      opacity: 1;
    }

    &.drag-handle:hover {
      .header-actions {
        .optionsBtn {
          color: @component-color-actions;
          opacity: 1;
        }

        .drag-handle {
          opacity: 1;
        }
      }

      .card-title,
      .card-title span {
        opacity: 1;
      }
    }
  }

  .card-inner-scroll {
    >* {
      padding-top: 0;
    }

    >[c8y-html-widget]>table,
    .table {
      margin: 0;

      td:first-child,
      th:first-child {
        padding-left: @component-padding;
      }

      td:last-child,
      th:last-child {
        padding-right: @component-padding;
      }
    }
  }

  group-assignment,
  c8y-device-status {
    display: inline-flex;
    height: 100%;
  }
}

.grid-stack-item .card+.ui-resizable-handle {
  margin-bottom: calc(@size-base * -1);
}

.grid-stack>.grid-stack-item>.grid-stack-item-content {
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  overflow: visible !important;
}

@media (max-width: @screen-sm-min) {
  .grid-stack-item {
    margin-bottom: 0 !important;
  }
}