@import 'styles/components/account-switcher.css';
@import 'styles/components/app-bar.css';
@import 'styles/components/brand-expression.css';
@import 'styles/components/card.css';
@import 'styles/components/charts.css';
@import 'styles/components/details-drawer.css';
@import 'styles/components/floating-action-button.css';
@import 'styles/components/list-item.css';
@import 'styles/components/navi-drawer.css';
@import 'styles/components/navi-item.css';
@import 'styles/components/navi-menu.css';
@import 'styles/components/singleSelector.css';
@import 'styles/components/tab-bar.css';
@import 'styles/components/footer-bar.css';
@import 'styles/components/view-frame.css';
@import 'styles/components/message-list.css';
@import 'styles/components/tickets-view.css';
@import 'styles/components/vaadin-button.css';
@import 'styles/components/label-card.css';
@import 'styles/components/pieChart-card.css';
@import 'styles/components/grid.css';
@import 'styles/components/messages-view.css';
@import 'styles/components/messages-card.css';
@import 'styles/components/vaadin-text-field.css';
@import 'styles/components/nps-list-card.css';
@import 'styles/components/channel-manager.css';
@import 'styles/components/card-window.css';
@import 'styles/components/vaadin-details-summary.css';
@import 'styles/components/vaadin-tab.css';
@import 'styles/components/composition-card.css';
@import 'styles/components/combo-box.css';
@import 'styles/components/responsive-button.css';

@import 'styles/lumo/border-radius.css';
@import 'styles/lumo/icon-size.css';
@import 'styles/lumo/margin.css';
@import 'styles/lumo/padding.css';
@import 'styles/lumo/shadow.css';
@import 'styles/lumo/spacing.css';
@import 'styles/lumo/typography.css';
@import 'styles/lumo/badge-color.css';

@import 'styles/misc/box-shadow-borders.css';
@import 'styles/misc/delete-button.css';
@import 'styles/misc/upload-label.css';

@import 'styles/views/login.css';
@import 'styles/views/statistics.css';
@import 'styles/views/ticketForm.css';
@import 'styles/views/organizationView.css';
@import 'styles/views/dashboardView.css';
@import 'styles/views/summaryList.css';

:root {
  --app-bar-height: var(--lumo-size-xl);

  --navi-drawer-width: calc(var(--lumo-size-m) * 7);
  --navi-drawer-rail-width: calc(var(--lumo-size-m) * 1.75);
  --navi-item-indentation: calc(var(--lumo-icon-size-s) + var(--lumo-space-l));

  --details-drawer-width: calc(var(--lumo-size-m) * 11);
  --details-drawer-width-l: calc(var(--lumo-size-l) * 11);
  --details-drawer-width-xl: calc(var(--lumo-size-xl) * 11);

  --transition-duration-s: 160ms;
  --transition-duration-m: 240ms;
  --transition-duration-l: 320ms;

  /* Responsive sizing and spacing */
  --lumo-space-r-m: var(--lumo-space-m);
  --lumo-space-r-l: var(--lumo-space-l);
  --lumo-space-r-x: var(--lumo-space-l);
  --lumo-space-wide-r-m: var(--lumo-space-wide-m);
  --lumo-space-wide-r-l: var(--lumo-space-wide-l);
}

@media (max-width: 479px) {
  :root {
    --lumo-space-r-x: 0;
  }
}

@media (min-width: 480px) and (max-width: 1023px) {
  :root {
    --lumo-space-r-x: var(--lumo-space-m);
  }
}

@media (max-width: 1023px) {
  :root {
    --lumo-space-r-m: var(--lumo-space-s);
    --lumo-space-r-l: var(--lumo-space-m);
    --lumo-space-wide-r-m: var(--lumo-space-wide-s);
    --lumo-space-wide-r-l: var(--lumo-space-wide-m);
  }
}

html,
body {
  height: 100%;
  overflow: hidden;
  width: 100%;
}

.root {
  /*background-color: var(--lumo-contrast-5pct);*/
  background-color: var(--dead-back-color);
}

@keyframes rotate {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.root__rotate-icon {
  animation: rotate 2s linear infinite;
}

.app-header-outer,
.app-footer-outer {
  z-index: 3;
}

vaadin-text-field {
  align-self: auto;
}

vaadin-dialog-overlay::part(content) {
  padding: var(--lumo-space-r-m);
  padding-top: 0;
}

@media all and (max-width: 1100px) {
  .list-view.editing .toolbar,
  .list-view.editing .contact-grid {
    display: none;
  }
}


 vaadin-grid.force-focus-outline::part(focused-cell)::after {
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     pointer-events: none;
     box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
     background: none;
     /*background: var(--lumo-contrast-10pct);*/
 }

 .test::part(input-field){
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      font-size: var(--lumo-font-size-m);
      padding: var(--lumo-space-xs) var(--lumo-space-m);
      height: var(--lumo-size-m);
      background: transparent;
  }


html {

      --lumo-font-size: 1rem;
      --lumo-font-size-xxxl: 1.75rem;
      --lumo-font-size-xxl: 1.375rem;
      --lumo-font-size-xl: 1.125rem;
      --lumo-font-size-l: 1rem;
      --lumo-font-size-m: 0.875rem;
      --lumo-font-size-s: 0.8125rem;
      --lumo-font-size-xs: 0.75rem;
      --lumo-font-size-xxs: 0.6875rem;
      --lumo-line-height-m: 1.4;
      --lumo-line-height-s: 1.2;
      --lumo-line-height-xs: 1.1;
      --lumo-size-xl: 3rem;
      --lumo-size-l: 2.5rem;
      --lumo-size-m: 2rem;
      --lumo-size-s: 1.75rem;
      --lumo-size-xs: 1.5rem;
      /*--lumo-font-family: Poppins;*/


      --dead-back-color: #F4F5F7;   /* almost white*/
      --borders-color: #F8F9FB;     /* almost white*/
      --active-back-color: #FFFFFF; /* white*/
      --primary-color: #3b82f6;     /* blue*/

      --normal-text-color: rgb(144, 151, 161); /* gray*/
      --secondary-text-color: rgb(178, 186, 199); /* gray*/
      --back-text-color: #111828;   /* black*/

      --custom-border-radius: 8px;
      --navi-drawer-hover-color: #e5ecff;
      --main-content-background: var(--dead-back-color);

      --lumo-header-text-color: var(--back-text-color);
      /*--lumo-body-text-color: rgb(144, 151, 161);*/
      /*--lumo-secondary-text-color: rgb(178, 186, 199);*/
      --lumo-primary-color: #3B82F6;
      --vaadin-button-primary-background: #3B82F6;
      --vaadin-button-primary-color: #9097A1;
      --vaadin-button-tertiary-text-color: var(--lumo-primary-text-color);
      /*--lumo-required-field-indicator-color: red;*/
      --lumo-base-color: #FFFFFF; /* used in card in dashboard*/
      --vaadin-grid-cell-background: var(--lumo-base-color);
      --navi-drawer-content-background: var(--lumo-base-color); /* used in navi drawer*/
      --lumo-clickable-cursor: pointer;


      /*new colors*/
      --lumo-orange-color: rgba(225, 119, 47, 1); /* orange */
      --lumo-orange-color-10pct: rgba(225, 119, 47, 0.2); /* light orange */
      --lumo-orange-text-color: rgba(225, 119, 47, 1); /* orange */
      --lumo-orange-contrast-color: #fff; /* white*/

    }



/* Extra small (xs) - Mobile devices */
.col-xs-1 { grid-column: span 1; }
.col-xs-2 { grid-column: span 2; }
.col-xs-3 { grid-column: span 3; }
.col-xs-4 { grid-column: span 4; }
.col-xs-5 { grid-column: span 5; }
.col-xs-6 { grid-column: span 6; }
.col-xs-7 { grid-column: span 7; }
.col-xs-8 { grid-column: span 8; }
.col-xs-9 { grid-column: span 9; }
.col-xs-10 { grid-column: span 10; }

/* Small (sm) - Tablets */
@media (min-width: 576px) {
    .col-sm-1 { grid-column: span 1; }
    .col-sm-2 { grid-column: span 2; }
    .col-sm-3 { grid-column: span 3; }
    .col-sm-4 { grid-column: span 4; }
    .col-sm-5 { grid-column: span 5; }
    .col-sm-6 { grid-column: span 6; }
    .col-sm-7 { grid-column: span 7; }
    .col-sm-8 { grid-column: span 8; }
    .col-sm-9 { grid-column: span 9; }
    .col-sm-10 { grid-column: span 10; }
}

/* Medium (md) - Small laptops */
@media (min-width: 768px) {
    .col-md-1 { grid-column: span 1; }
    .col-md-2 { grid-column: span 2; }
    .col-md-3 { grid-column: span 3; }
    .col-md-4 { grid-column: span 4; }
    .col-md-5 { grid-column: span 5; }
    .col-md-6 { grid-column: span 6; }
    .col-md-7 { grid-column: span 7; }
    .col-md-8 { grid-column: span 8; }
    .col-md-9 { grid-column: span 9; }
    .col-md-10 { grid-column: span 10; }
}

/* Large (lg) - Desktops */
@media (min-width: 1200px) { /*before 992px*/
    .col-lg-1 { grid-column: span 1; }
    .col-lg-2 { grid-column: span 2; }
    .col-lg-3 { grid-column: span 3; }
    .col-lg-4 { grid-column: span 4; }
    .col-lg-5 { grid-column: span 5; }
    .col-lg-6 { grid-column: span 6; }
    .col-lg-7 { grid-column: span 7; }
    .col-lg-8 { grid-column: span 8; }
    .col-lg-9 { grid-column: span 9; }
    .col-lg-10 { grid-column: span 10; }
}

/* Extra large (xl) - Large desktop screens */
@media (min-width: 1500px) { /*before 1200px*/
    .col-xl-1 { grid-column: span 1; }
    .col-xl-2 { grid-column: span 2; }
    .col-xl-3 { grid-column: span 3; }
    .col-xl-4 { grid-column: span 4; }
    .col-xl-5 { grid-column: span 5; }
    .col-xl-6 { grid-column: span 6; }
    .col-xl-7 { grid-column: span 7; }
    .col-xl-8 { grid-column: span 8; }
    .col-xl-9 { grid-column: span 9; }
    .col-xl-10 { grid-column: span 10; }
}

/* Row layout with outer padding and gap */
.board-row {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 16px;
    padding: 0 16px; /* Outer padding on left and right */
    width: 100%;
    margin-bottom: 16px; /* Gap between rows */
    box-sizing: border-box;
}

/* Responsive column heights */
@media (max-width: 575px) {
    .board-column { min-height: 200px; }
}

@media (min-width: 576px) and (max-width: 767px) {
    .board-column { min-height: 250px; }
}

@media (min-width: 768px) and (max-width: 991px) {
    .board-column { min-height: 300px; }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .board-column { min-height: 350px; }
}

@media (min-width: 1200px) {
    .board-column { min-height: 400px; }
}


vaadin-form-layout-column-spacing {
  width: calc(49.95% - 0.75rem);
  margin-left: 0px;
}
.truncated-text {
    cursor: help;
    border-bottom: 1px dotted var(--lumo-contrast-50pct);
    color: var(--lumo-body-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}