@use '@angular/material' as mat;
@use "sass:map";

// Restores color="primary|accent|warn" support on mat-toolbar, mat-icon,
// mat-progress-bar and mat-progress-spinner when using an M3 theme.
// mat.color-variants-backwards-compatibility() handles buttons, checkboxes,
// etc. but intentionally omits toolbar (toolbar has its own .mat-primary block
// in M2 but not in M3). We use --o-* CSS variables so the tokens follow
// the active Ontimize theme automatically.
@mixin _mat-color-input-backwards-compatibility() {
  .mat-toolbar {
    &.mat-primary {
      --mat-toolbar-container-background-color: var(--mat-sys-primary);
      --mat-toolbar-container-text-color: var(--mat-sys-on-primary);
    }
    &.mat-accent {
      --mat-toolbar-container-background-color: var(--mat-sys-tertiary);
      --mat-toolbar-container-text-color: var(--mat-sys-on-tertiary);
    }
    &.mat-warn {
      --mat-toolbar-container-background-color: var(--mat-sys-error);
      --mat-toolbar-container-text-color: var(--mat-sys-on-error);
    }
  }

  mat-icon {
    &.mat-primary { --mat-icon-color: var(--mat-sys-primary); }
    &.mat-accent  { --mat-icon-color: var(--mat-sys-tertiary); }
    &.mat-warn    { --mat-icon-color: var(--mat-sys-error); }
  }
}

// Create a theme.
@mixin o-material-theme($theme-or-color-config, $typographyConfig: null) {

  // Merge $typographyConfig into $theme-or-color-config if provided.
  @if $typographyConfig != null {
    $theme-or-color-config: map.merge($theme-or-color-config, 'typography', $typographyConfig);
  }

  // Include Material theme styles for core and every component.
  // Prefer the M3 theme object built by o-mat-light/dark-theme when
  // present; fall back to the legacy M2-shape config otherwise.
  //
  // Material M3 requires component-theme mixins to be wrapped in a
  // selector (html/:root/& are all valid). When the caller is already
  // inside a selector we reuse it via `&`; otherwise we target html so
  // the tokens become effective document-wide.
  $typography: map.get($theme-or-color-config, typography);
  $density: map.get($theme-or-color-config, density);
  $m3-theme: map.get($theme-or-color-config, m3-theme);

  // Color-only mode: typography and density are null (set by
  // `ontimize-theme-all-component-color` for the dark-theme branch, where
  // only colours should be re-emitted). Avoids duplicate theme-style warnings
  // from Material when typography/density are emitted more than once.
  $color-only: $m3-theme != null and $typography == null and $density == null;

  @if $m3-theme {
    @if & {
      & {
        // Emit --mat-sys-* CSS custom properties from the M3 palette so that
        // component SCSS can reference var(--mat-sys-primary-container) etc.
        // mat.all-component-themes() bakes palette values into --mdc-* tokens
        // at compile time and does NOT emit --mat-sys-* definitions itself.
        @include mat.system-level-colors($m3-theme, (), 'mat-sys');
        @if not $color-only {
          @include mat.system-level-typography($m3-theme, (), 'mat-sys');
          @include mat.system-level-elevation($m3-theme, (), 'mat-sys');
          @include mat.system-level-shape($m3-theme, (), 'mat-sys');
          @include mat.system-level-motion($m3-theme, (), 'mat-sys');
          @include mat.system-level-state($m3-theme, (), 'mat-sys');
        }
        @if $color-only {
          @include mat.all-component-colors($m3-theme);
        } @else {
          @include mat.core();
          @include mat.all-component-themes($m3-theme);
        }
        @include mat.color-variants-backwards-compatibility($m3-theme);
      }
    } @else {
      html {
        @include mat.system-level-colors($m3-theme, (), 'mat-sys');
        @if not $color-only {
          @include mat.system-level-typography($m3-theme, (), 'mat-sys');
          @include mat.system-level-elevation($m3-theme, (), 'mat-sys');
          @include mat.system-level-shape($m3-theme, (), 'mat-sys');
          @include mat.system-level-motion($m3-theme, (), 'mat-sys');
          @include mat.system-level-state($m3-theme, (), 'mat-sys');
        }
        @if $color-only {
          @include mat.all-component-colors($m3-theme);
        } @else {
          @include mat.core();
          @include mat.all-component-themes($m3-theme);
        }
        @include mat.color-variants-backwards-compatibility($m3-theme);
      }
    }
    @include _mat-color-input-backwards-compatibility();
  } @else if $typography {
    @include mat.core();
    @include mat.all-component-themes($theme-or-color-config);
  } @else {
    @include mat.all-component-colors($theme-or-color-config);
  }

  @include app-global-theme($theme-or-color-config);
  @include o-breadcrumb-theme($theme-or-color-config);
  @include o-container-theme($theme-or-color-config);
  @include o-form-toolbar-theme($theme-or-color-config);
  @include o-button-theme($theme-or-color-config);
  @include o-button-toggle-theme($theme-or-color-config);
  //@include input-theme($theme-or-color-config);
  @include o-date-input-theme($theme-or-color-config);
  @include o-dialog-theme($theme-or-color-config);
  @include o-table-theme($theme-or-color-config);
  @include o-list-theme($theme-or-color-config);
  @include o-list-picker-theme($theme-or-color-config);
  @include o-app-header-theme($theme-or-color-config);
  @include o-app-sidenav-theme($theme-or-color-config);
  @include o-app-layout-theme($theme-or-color-config);
  @include o-card-menu-item-theme($theme-or-color-config);
  @include o-hour-input-theme($theme-or-color-config);
  @include o-form-layout-split-pane-theme($theme-or-color-config);
  @include o-form-layout-tabgroup-theme($theme-or-color-config);
  @include o-bar-menu-theme($theme-or-color-config);
  @include o-grid-theme($theme-or-color-config);
  @include o-layout-padding-margin();
  @include o-daterange-input-theme($theme-or-color-config);
  @include o-dual-list-selector-theme($theme-or-color-config);
  @include o-image-theme($theme-or-color-config);
}@mixin o-app-header-theme($theme-or-color-config) {
  .o-app-header {
    background-color: var(--o-bg-app-bar);

    nav {
      &.o-app-header-primary {
        background-color: var(--mat-sys-primary);
      }

      &.o-app-header-accent {
        background-color: var(--mat-sys-tertiary);
      }

      .menu-button {
        background: transparent;
      }

      .o-app-header-title {
        color: var(--o-fg-button);
      }
    }

    .o-user-info {
      color: var(--o-fg-text);
    }
  }

}@mixin o-app-sidenav-theme($theme-or-color-config) {
  .o-app-sidenav {
    // --mat-sidenav-container-shape: 0;
    --mdc-text-button-label-text-color: var(--o-fg-text);

    .mat-sidenav.o-app-sidenav-sidenav {
      background: var(--o-bg-app-bar);
    }

    .o-app-sidenav-container {

      // ── Open state ──────────────────────────────────────────────
      .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) {
        .mat-sidenav.o-app-sidenav-sidenav {
          background: var(--o-bg-status-bar);
          box-shadow: none;
        }

        .o-app-sidenav-menu-group,
        .o-app-sidenav-menu-item {

          a:hover,
          a.o-app-sidenav-viewer-sidenav-item-selected {
            color: var(--mat-sys-primary);
          }

          a:hover {
            background-color: var(--mat-sys-primary-container);
          }

          a.o-app-sidenav-viewer-sidenav-item-selected {
            background-color: color-mix(in srgb, var(--mat-sys-primary-container) 48%, transparent);
          }
        }

        .o-app-sidenav-menu-group-level-1 {
          >.o-app-sidenav-menugroup.opened+.o-app-sidenav-menugroup-items-container {
            a .mdc-button__label {
              border-left: 2px solid var(--o-fg-divider);
            }

            a.o-app-sidenav-viewer-sidenav-item-selected .mdc-button__label,
            a:hover .mdc-button__label {
              border-color: var(--mat-sys-primary);
            }
          }
        }

        .o-app-sidenav-menu-group-level-2 {
          >.o-app-sidenav-menugroup.opened+.o-app-sidenav-menugroup-items-container {
            a .mdc-button__label {
              border-left: none;
            }
          }
        }
      }

      // ── Closed state ─────────────────────────────────────────────
      .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed {

        a:hover,
        a.o-app-sidenav-viewer-sidenav-item-selected {
          color: var(--mat-sys-primary);
        }

        a:hover {
          background-color: var(--mat-sys-primary-container);
        }

        a.o-app-sidenav-viewer-sidenav-item-selected {
          background-color: color-mix(in srgb, var(--mat-sys-primary-container) 48%, transparent);
        }
      }

      // ── Desktop collapsed offset ──────────────────────────────────
      &.o-app-sidenav-mode-desktop:not(.opened) {
        .o-app-sidenav-sidenav.mat-drawer-closed {
          transform: translate3d(-183px, 0, 0);
        }

        .o-app-sidenav-content.mat-drawer-content {
          margin-right: 56px !important;
          transform: translate3d(56px, 0, 0) !important;

        }
      }
    }

    .o-app-sidenav-content.mat-drawer-content {

      background-color: var(--o-bg-background);
    }


    // header-layout: user-info font weight inside sidenav
    &.header-layout .o-app-sidenav-container .o-app-header {
      .o-user-info .o-user-info-wrapper {
        font-weight: 500;
      }
    }


    .mat-mdc-menu-panel {
      border: 1px solid var(--o-fg-divider);
    }
  }
}@mixin o-bar-menu-theme($theme-or-color-config) {
    $bg-color: #FFF;
    $fg-color: rgba(0, 0, 0, 0.7);

    $item-bg-color-hover-dark: rgba(0, 0, 0, 0.16);
    $item-bg-color-hover-light: rgba(255, 255, 255, 0.16);

    .o-bar-menu {
      box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);

      nav {
        .fake-ul {
          .fake-ul {
            background-color: $bg-color;

            .mat-icon,
            .o-bar-menu-group-title,
            .o-bar-menu-item-title,
            label.toggle {
              color: $fg-color;
            }

            .fake-li {
              background-color: $bg-color;
            }
          }
        }

        a {
          color: $bg-color;
        }
      }

      @media all and (min-width : 768px) {
        nav .fake-ul {
          .fake-li .fake-ul .fake-li-hover {
            background: $item-bg-color-hover-dark;
          }

          .fake-li-hover {
            background-color: $item-bg-color-hover-light;
          }
        }
      }

      @media all and (max-width : 767px) {
        nav {
          a:hover {
            background-color: rgba(255, 255, 255, 0.15);
          }

          .fake-ul {
            border-top: 1px solid rgba(255, 255, 255, 0.5);
          }
        }

        .toggle {
          &:hover {
            background-color: rgba(255, 255, 255, 0.15);
          }
        }
      }
    }
  }@mixin o-breadcrumb-theme($theme-or-color-config) {
  .toolbar-breadcrumb {
    background-color: var(--o-bg-app-bar);

    a {
      color: var(--mat-sys-primary);
    }

    mat-icon {
      color: var(--mat-sys-tertiary);
    }
  }

}@mixin o-button-theme($theme-or-color-config) {
  .o-button {
    button.mat-mdc-button-base.mdc-button {
      min-width: 112px;
    }
  }
}@mixin o-button-toggle-theme($theme-or-color-config) {

  .o-button-toggle-group {

    .mat-button-toggle,
    .mat-button-toggle-group {


    }
  }
}@mixin o-card-menu-item-theme($theme-or-color-config) {
  .o-card-menu-item {

    background: var(--o-bg-card);
    border: 1px solid color-mix(in srgb, var(--mat-sys-primary) 17%, transparent);

    .o-card-menu-item-main {
      background-color: color-mix(in srgb, var(--o-bg-background) 29%, transparent);
    }

    .o-card-menu-item-title {
      font-size: var(--mat-sys-title-large-size);
      color: var(--mat-sys-primary);
    }

    .mat-mdc-button:not(:disabled) {
      color: var(--mat-sys-primary);
      background: var(--mat-sys-tertiary-container);
    }

    .o-card-menu-item-icon,
    .o-card-menu-item-info {
      color: color-mix(in srgb, var(--mat-sys-primary) 54%, transparent);
    }

  }

}@mixin o-container-theme($theme-or-color-config) {
  .o-column,
  .o-column-collapsible,
  .o-row,
  .o-row-collapsible {
    >.o-container {
      &.mat-expansion-panel {
        background-color: inherit;
      }

      >.o-container-header,
      >.o-container-title,
      >.mat-expansion-panel-header {
        border-left: var(--o-fg-divider);
        color: var(--o-fg-text);

        .mdc-tab__text-label,
        .mat-mdc-tab-link {
          color: var(--o-fg-text);
        }

      }

      >.o-container-title,
      >.mat-expansion-panel-header .o-container-title {
        span {
          font: {
            size: var(--mat-sys-body-medium-size);
            weight: var(--mat-sys-body-medium-weight);
          }
        }
      }
    }
  }

  .o-column-collapsible,
  .o-row-collapsible {
    >.o-container {
      .o-container-title.mat-expansion-panel-header-title {
        border: none;
      }
    }
  }

  .o-column-collapsible.o-appearance-outline,
  .o-column.o-appearance-outline,
  .o-row-collapsible.o-appearance-outline,
  .o-row.o-appearance-outline {
    >.o-container {
      .o-container-title {
        color: var(--o-fg-text);
      }
    }

    .o-container-outline {

      .o-container-outline-end,
      .o-container-outline-gap,
      .o-container-outline-gap-description,
      .o-container-outline-gap-empty1,
      .o-container-outline-gap-empty2,
      .o-container-outline-gap-icon,
      .o-container-outline-gap-title,
      .o-container-outline-start {
        border-color: var(--o-fg-divider);
      }
    }
  }
}@mixin o-dual-list-selector-theme($theme-or-color-config) {
  .o-dual-list-selector {
    .o-dual-list-selector-list {
      .mat-mdc-selection-list.mat-mdc-list-base {
        border: 1px solid var(--o-fg-divider);

        .mat-mdc-list-item {
          &:not(.mat-mdc-list-option) {
            border-bottom: 1px solid var(--o-fg-divider);
          }
        }

        .mat-mdc-list-option {
          background: var(--o-bg-level-04);

          &[aria-selected="true"] {
            background-color: color-mix(in srgb, var(--mat-sys-primary) 20%, transparent);

            .mdc-list-item__secondary-text {
              color: var(--o-fg-text);
            }
          }
        }

        &.cdk-drop-list-dragging {
          border-style: dashed;
          border-width: 2px;
        }
      }

      .mat-mdc-mini-fab:not([class*='mat-elevation-z']) {
        box-shadow: none;

        &.mat-accent:not([disabled]) {
          background-color: var(--o-fg-divider);
          color: var(--o-fg-text);
        }
      }
    }
  }
}@mixin o-grid-theme($theme-or-color-config) {
  .o-grid {
    .mat-toolbar {
      padding: 0 4px;
      background: transparent;
    }

    .o-grid-container {
      .o-loading-blocker .o-spinner-container {
       background-color: transparent;
      }
    }

    .mat-paginator {
      background-color: inherit;
    }
  }
}@mixin o-image-theme($theme-or-color-config) {
  // The SVG dashed borders below use hex fallbacks because CSS variables
  // cannot be interpolated inside url("data:image/svg+xml,...") at runtime.
  // The value matches the light-theme --o-fg-secondary-text (rgba 0,0,0,.54).
  $svg-border: '%23898989';

  .o-image {
    .o-image-content {
      .o-image-display-container {
        &.o-image-drag-and-drop:not(.o-image-drag-and-drop-required) {
          background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='#{$svg-border}' stroke-width='1' stroke-dasharray='6' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
        }

        &.o-image-drag-and-drop.o-file-dragging {
          background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='#{$svg-border}' stroke-width='2' stroke-dasharray='6' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
          background-color: var(--o-bg-background);
        }

        &.o-image-drag-and-drop-required:not(.o-file-dragging) {
          border-color: var(--mat-sys-error);
        }

        .o-image-button-remove {
          background-color: var(--o-bg-background);

          &:hover {
            background-color: var(--o-fg-disabled-button);
          }
        }
      }
    }
  }
}@mixin icon-color-mixin($icon-color) {

  .icon-btn,
  .mat-icon,
  .read-only .mat-icon,
  .svg-icon {
    color: $icon-color;
  }
}

// @mixin input-theme($theme-or-color-config) {
//   $underline-color: color-mix(in srgb, var(--o-fg-divider) 42%, transparent);

//   .mat-mdc-form-field {
//     &.mat-form-field-disabled.accent {
//       @include icon-color-mixin(color-mix(in srgb, var(--o-accent-500) 42%, transparent));
//     }

//     &:not(.mat-form-field-disabled) {
//       @include icon-color-mixin(var(--o-fg-icon));

//       .placeholder {
//         color: var(--o-fg-icon);
//       }

//       &.accent {
//         @include icon-color-mixin(var(--o-accent-500));
//       }
//     }

//     .mat-disabled {
//       color: var(--o-fg-disabled-button);
//     }

//     &.mat-form-field-appearance-ontimize.read-only {

//       .mat-mdc-select-disabled .mat-mdc-select-value {
//         color: inherit;
//       }

//       mat-label {
//         color: $underline-color;
//       }

//       .mdc-text-field {
//         .mdc-line-ripple::after,
//         .mdc-line-ripple::before {
//           background-color: $underline-color;
//         }
//       }

//     }

//     &.mat-form-field-invalid .mat-mdc-form-field-icon-suffix .mat-icon {
//       color: var(--o-warn-500);
//     }

//   }

//   input:not([type]):disabled,
//   input[type="color"]:disabled,
//   input[type="date"]:disabled,
//   input[type="datetime"]:disabled,
//   input[type="datetime-local"]:disabled,
//   input[type="email"]:disabled,
//   input[type="month"]:disabled,
//   input[type="number"]:disabled,
//   input[type="password"]:disabled,
//   input[type="search"]:disabled,
//   input[type="tel"]:disabled,
//   input[type="text"]:disabled,
//   input[type="time"]:disabled,
//   input[type="url"]:disabled,
//   input[type="week"]:disabled,
//   textarea:disabled {
//     color: var(--o-fg-disabled-text);
//   }

//   .o-tooltip.o-mat-error {
//     .mdc-tooltip__surface {
//       background: var(--o-primary-contrast-500);
//       border: 1px solid var(--o-warn-500);
//       color: var(--o-warn-500);
//     }
//   }

//   /* CHECKBOX */
//   .mat-mdc-checkbox:not(.mat-mdc-checkbox-disabled) {
//     &.mat-accent,
//     &.mat-primary {
//       .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background {
//         border-color: var(--o-fg-secondary-text);
//       }
//     }
//   }
// }
@mixin o-list-theme($theme-or-color-config) {
  .o-list-container {

    .primary-text {
      color: var(--o-fg-text);
    }

    .secondary-text {
      color: var(--o-fg-secondary-text);
    }

    .o-list-row-action .mdc-checkbox,
    .o-list-item-icon {
      color: var(--o-fg-icon);
    }

    .spinner-container {
      &:not(.pageable-loading) {
        background-color: transparent;

      }

      &.pageable-loading {
        background-color: transparent;
      }
    }
  }
}@mixin app-global-theme($theme-or-color-config, $typography: null) {
  body,
  html {
    background-color: var(--o-bg-background);
  }

  button,
  html,
  input,
  select,
  span,
  textarea {
    font-family: var(--o-font-family);
  }

  // ─── Scrollbar — Clear SaSS (webkit + modern CSS) ────────────────────────
  // --o-scroll-thumb is emitted by o-apply-tokens (primary at 0.3 opacity,
  // compiled to static rgba so scrollbar pseudo-elements can read it).
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background-color: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background-color: var(--o-scroll-thumb, rgba(0, 0, 0, 0.3));
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }

  ::-webkit-scrollbar-thumb:hover {
    opacity: 0.7;
  }

  // Firefox / Chrome 121+ / Safari 18.2+
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--o-scroll-thumb, rgba(0, 0, 0, 0.3)) transparent;
  }

  .o-loading {
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    z-index: 999;

    div {
      box-sizing: border-box;
      display: block;
      position: absolute;
      aspect-ratio: 1;
      height: calc(100% - 12px);
      margin: 6px;
      border: 3px solid;
      border-radius: 50%;
      left: 50%;
      animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
      border-color: var(--mat-sys-primary) transparent transparent transparent;
    }

    div:nth-child(1) {
      animation-delay: -0.45s;
    }

    div:nth-child(2) {
      animation-delay: -0.3s;
    }

    div:nth-child(3) {
      animation-delay: -0.15s;
    }

  }

  @keyframes lds-ring {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  .o-form-layout-sidenav-container {
    .sidenav-title-container {
      border-bottom: 1px solid var(--mat-sys-primary);
    }
  }

  /* MODAL DIALOG IN O-DIALOG, FORM LAYOUT MANAGER AND LIST-PICKER */

  .o-dialog-class,
  .o-form-layout-dialog-overlay,
  .o-list-picker-dialog {
    .mat-mdc-dialog-container {
      .mat-mdc-dialog-title {
        border-bottom: 1px solid var(--mat-sys-primary);

        .mat-icon {
          color: var(--mat-sys-primary);
        }
      }

      .mat-mdc-dialog-title {
        line-height: var(--mat-sys-title-small-size);
        font-size: var(--mat-sys-title-small-size);
      }

      .mat-mdc-dialog-title.title-container {
        display: flex;
      }


      .empty-filter-list {
        color: var(--o-fg-disabled-text);
      }

      .mat-mdc-dialog-content {
        font-size: var(--mat-sys-body-medium-size);

        .mat-mdc-subheader.mdc-list-group__subheader {
          font-weight: inherit;
          font-size: inherit;
          margin: 0;

        }


        .mdc-list {
          padding: 0;
          // @include mat.list-density(-2);

          .mat-mdc-list-item.mdc-list-item {
            margin: 6px 0;
            border-radius: 4px;

            &.mdc-list-item--with-leading-checkbox .mdc-list-item__start {
              margin-right: 8px;
            }

            &.mdc-list-item--with-one-line,
            &.mdc-list-item--with-two-lines,
            &.mdc-list-item--with-three-lines {
              height: auto;
              min-height: 30px;

            }

            .mdc-list-item__content {
              align-self: center;
              width: 100%;


              .mdc-list-item__secondary-text,
              .mdc-list-item__primary-text {
                margin-bottom: 0;
                align-self: center;
                vertical-align: middle;

                &::before,
                &::after {
                  content: none;
                }

                &.mat-mdc-list-item-unscoped-content {
                  vertical-align: middle;
                  width: 100%;
                }
              }
            }

            .mdc-list-item__start {
              align-self: center;
              margin-top: 0;
            }

          }
        }

      }
    }
  }



  /*global styles about drag/drop in dialogs table*/
  .cdk-drag-preview,
  .cdk-drag-dragging {

    &.mdc-list-item.mat-mdc-list-item {

      background-color: var(--o-bg-background);
      box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
      box-sizing: border-box;
      border-radius: 2px;

      .mdc-list-item__secondary-text,
      .mdc-list-item__primary-text {
        // padding: 0 8px;
        width: 100%;

        &::before,
        &::after {
          content: none;
        }
      }

      .mdc-list-item__start {
        align-self: center;
        margin-top: 0;
        margin-right: 8px;
      }

      .mdc-list-item__secondary-text {
        color: var(--o-fg-icon);
        font-size: var(--mat-sys-body-medium-size);
      }
    }

  }

  .cdk-drop-list-dragging .o-drag-list-item-box:not(.cdk-drag-placeholder) {
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
  }


  o-data-toolbar {

    &.o-grid-toolbar button.o-grid-button,
    &.o-list-toolbar button.o-list-button,
    &.o-table-toolbar .buttons .o-table-button,
    &.o-table-toolbar .buttons button {
      margin: 0 4px;

      &:first-child {
        margin-left: 0;
      }

      &:last-child {
        margin-right: 0;
      }
    }
  }

  .mat-mdc-dialog-actions,
  .o-form .o-form-toolbar {
    button {
      margin: 0 8px;

      &:first-child {
        margin-left: 0;
      }

      &:last-child {
        margin-right: 0;
      }
    }
  }

  /*BUTTONS HOVER*/
  // .mat-mdc-dialog-actions button:not([disabled]),
  // .o-form .o-form-toolbar button:not([disabled]).o-form-toolbar-button,
  // .o-grid .o-grid-toolbar button.o-grid-button:not([disabled]),
  // .o-list .o-list-toolbar button.o-list-button:not([disabled]),
  // .ontimize-table.o-table .o-table-container .o-table-toolbar .buttons .o-table-button button:not([disabled]) {

  //   &.mat-mdc-button-base.mat-primary,
  //   &.mat-mdc-button-base.o-button-primary {
  //     color: var(--mat-sys-on-primary-container);
  //     background-color: var(--mat-sys-primary-container);
  //     border-color: transparent;

  //     &:hover {
  //       color: var(--mat-sys-primary);
  //       background-color: #ffffff;
  //       border-color: var(--o-fg-divider);
  //     }

  //   }

  //   &.mat-mdc-button-base,
  //   &.mat-mdc-button-base.mat-accent {
  //     color: var(--mat-sys-tertiary);
  //     background-color: #ffffff;

  //     &:hover {
  //       color: var(--mat-sys-on-primary-container);
  //       background-color: var(--mat-sys-primary-container);
  //       border-color: transparent;
  //     }
  //   }

  // }

  .o-form .o-form-toolbar [o-form-toolbar-buttons]>* {

    margin: 0 8px;

    &:first-child {
      margin-left: 0;
    }

  }

  // .o-button button.mat-mdc-outlined-button {
  //   &:not([disabled]) {
  //     &.mat-primary {
  //       color: var(--mat-sys-on-primary-container);
  //       background-color: var(--mat-sys-primary-container);
  //       border-color: transparent;

  //       &:hover {
  //         color: var(--mat-sys-primary);
  //         background-color: #ffffff;
  //         border-color: var(--o-fg-divider);
  //       }

  //     }

  //     &.mat-accent {
  //       color: var(--mat-sys-tertiary);
  //       background-color: #ffffff;

  //       &:hover {
  //         color: var(--mat-sys-on-tertiary-container);
  //         background-color: var(--mat-sys-tertiary-container);
  //       }
  //     }

  //   }

  // }

  /** QUICKFILTER */

  .o-table .o-table-quickfilter .quickFilter,
  .o-list .o-search-input .quickFilter,
  .o-tree .o-search-input .quickFilter,
  .o-grid .o-search-input .quickFilter {
    .mat-mdc-form-field {
      .mat-mdc-text-field-wrapper {
        .mat-mdc-form-field-flex {
          padding: 0;
        }
      }
    }
  }

  // Common padding in quickfilter icon
  .o-table,
  .o-list .o-search-input,
  .o-tree .o-search-input,
  .o-grid .o-search-input {
    .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix {
      padding-left: 10px;
      padding-right: 10px;
    }
  }

  // Common styles for .quickfilter
  .o-table,
  .o-list .o-search-input,
  .o-tree .o-search-input,
  .o-grid .o-search-input,
  .o-search-input {
    .quickFilter {
      .mat-mdc-form-field {

        .mat-mdc-form-field-subscript-wrapper {
          display: none;
        }

        .mat-mdc-form-field-flex {


          .mat-mdc-form-field-infix {
            align-self: center;
            padding: 0;
            display: flex;
          }

          .mat-mdc-form-field-icon-prefix {

            div {
              align-items: center;
              display: flex;
              border-right: 1px solid rgba(0, 0, 0, 0.12);

              .mat-icon {
                margin-right: 6px;
              }

              button {
                margin-right: 6px;
              }

              .mat-badge-content {
                background-color: #3C8500;
              }
            }
          }

        }
      }
    }
  }

  .o-tree .o-search-input {
    .quickFilter {
      .mat-mdc-form-field {
        .mat-mdc-form-field-flex {
          .mat-mdc-form-field-icon-prefix {
            border-right: 1px solid rgba(0, 0, 0, 0.12);
          }
        }
      }
    }
  }

  // .o-form .o-form-toolbar button,
  // .ontimize-table.o-table .o-table-container .o-table-toolbar .buttons .o-table-button button {
  //   &.mat-mdc-outlined-button {


  //     .mat-mdc-button-wrapper {
  //       .mat-icon {
  //         margin-right: 4px;
  //         font-size: 20px;
  //         width: 20px;
  //         height: 20px;
  //         line-height: 20px;

  //       }

  //       span {
  //         flex: 1;
  //       }
  //     }
  //   }
  // }


}// Layout-padding-xxx & Layout-margin-xxxx
// ------------------------------
$baseline-grid: 8px !default;
$layout-gutter-width: ($baseline-grid * 2) !default;
$layout-gutter-width-vertical: $baseline-grid;
$layout-gutter-width-horizontal: 14px !default;
@mixin o-layout-padding-margin() {
  [layout-padding-vertical] {
    padding: $layout-gutter-width-vertical 0;
  }

  [layout-margin-vertical] {
    margin: $layout-gutter-width-vertical 0;
  }

  [layout-padding-horizontal] {
    padding: 0 $layout-gutter-width-horizontal;
  }

  [layout-margin-horizontal] {
    margin: 0 $layout-gutter-width-horizontal;
  }

  [layout-padding-left] {
    padding-left: $layout-gutter-width-horizontal;
  }

  [layout-margin-left] {
    margin-left: $layout-gutter-width-horizontal;
  }

  [layout-padding-right] {
    padding-right: $layout-gutter-width-horizontal;
  }

  [layout-margin-right] {
    margin-right: $layout-gutter-width-horizontal;
  }

  [layout-padding-top] {
    padding-top: $layout-gutter-width-vertical;
  }

  [layout-margin-top] {
    margin-top: $layout-gutter-width-vertical;
  }

  [layout-padding-bottom] {
    padding-bottom: $layout-gutter-width-vertical;
  }

  [layout-margin-bottom] {
    margin-bottom: $layout-gutter-width-vertical;
  }

}
@mixin o-form-toolbar-theme($theme-or-color-config) {
  .o-form-toolbar-header {
    background-color: transparent;
  }
}@mixin o-date-input-theme($theme-or-color-config) {
  // No theme-specific styles for o-date-input — colours flow through
  // global Material/Ontimize tokens (--mat-sys-* and --o-*).
}
@mixin o-daterange-input-theme($theme-or-color-config) {
  // The inline SVG arrow backgrounds below come in two encoded variants
  // (white fill for dark themes, black fill for light). We keep both via an
  // .o-dark override at the bottom of this mixin so the dark theme swaps
  // them via the existing :root / .o-dark CSS var scope model.
  $is-dark-theme: false;
  $color-inactive: #999999;

  /*
  *  variables
  */

  // Select
  $select-border: 1px solid #f2f2f2 !default;
  $select-background: rgba(255, 255, 255, 0.90) !default;
  $select-padding: 5px !default;
  $select-radius: 2px !default;
  $input-height: 3rem !default;

  /*
* styles
*/
  .md-drppicker {
    .calendar {

      td,
      th {
        color: var(--o-fg-text);

        &.in-range {
          color: #fff;
        }

        &.available {
          &.prev {
            background-image: if($is-dark-theme, url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCiAgPGc+DQogICAgPHBhdGggZD0iTTMuNywwLjdMMS40LDNsMi4zLDIuM0wzLDZMMCwzbDMtM0wzLjcsMC43eiIgZmlsbD0iI0ZGRkZGRiIvPg0KICA8L2c+DQo8L3N2Zz4="), url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K"));
          }

          &.next {
            background-image: if($is-dark-theme, url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiIGZpbGw9IiNGRkZGRkYiIC8+DQo8L2c+DQo8L3N2Zz4NCg=="), url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K"));
          }
        }
      }
    }

    background-color: var(--o-bg-card);

    &:after,
    &:before {
      border-bottom-color: var(--o-fg-divider);
    }

    .calendar-table {
      border-color: var(--o-fg-divider);
    }

    th {
      font-weight: normal;
    }

    td,
    th {
      text-align: center;

      border-color: var(--o-fg-divider);

      &.available {
        &:hover {
          background: color-mix(in srgb, var(--o-fg-base) 12%, transparent);
        }
      }

      &.week {
        font-size: 80%;
        color: #ccc;
      }
    }

    td {
      &.off {

        &,
        &.end-date,
        &.in-range,
        &.start-date {
          background-color: var(--o-bg-background);
          border-color: transparent;
          color: $color-inactive;
        }
      }

      //
      // Date Range
      &.in-range {
        background-color: color-mix(in srgb, var(--mat-sys-primary) 40%, transparent);
        border-color: transparent;
      }

      &.active {
        background-color: var(--mat-sys-primary);
        color: var(--mat-sys-on-primary);

        &,
        &:hover {
          background-color: var(--mat-sys-primary);

        }
      }
    }

    // disabled controls
    option,
    td {
      &.disabled {
        color: #999;

      }
    }

    .dropdowns {
      select {

        background-color: $select-background;

        &.ampmselect,
        &.hourselect,
        &.minuteselect,
        &.secondselect {
          width: 50px;
          margin: 0 auto;
          background: #eee;
          border: 1px solid #eee;
          padding: 2px;
          outline: 0;
          font-size: 12px;
        }

      }
    }

    .calendar-time {
      .select {
        .select-item {

          background-color: transparent;

          border-bottom: 1px solid rgba(0, 0, 0, 0.12);

          /* Remove focus */
          &:after {

            border-top: 6px solid rgba(0, 0, 0, 0.12);

          }

          .select-label {
            color: rgba(0, 0, 0, 0.26);

          }
        }
      }
    }

    .calendar-time select.disabled {
      color: $color-inactive;
    }



    /* ranges */
    .show-ranges {
      .drp-calendar.left {
        border-left: 1px solid #ddd;
      }
    }

    .ranges {
      ul {
        li {
          button {
            &.active {
              background: color-mix(in srgb, var(--o-fg-base) 12%, transparent);
            }
          }
        }

        li:hover {
          background: color-mix(in srgb, var(--o-fg-base) 12%, transparent);

        }
      }
    }

  }

}
@mixin o-hour-input-theme($theme-or-color-config) {
  ngx-material-timepicker-container ngx-material-timepicker-content {
    .timepicker__header {
      background-color: var(--mat-sys-primary) !important;
    }

    .clock-face {
      background-color: var(--o-bg-level-1);

      .clock-face__container {
        .clock-face__number>span.active {
          background-color: var(--mat-sys-primary);
        }
      }

      .clock-face__clock-hand {
        background-color: var(--mat-sys-primary);
      }

      .clock-face__clock-hand:after {
        background-color: var(--mat-sys-primary);
      }

      .clock-face__clock-hand_minute:before {
        border: 4px solid var(--mat-sys-primary);
      }
    }

    .timepicker-button {
      color: var(--mat-sys-primary);
    }

    .timepicker__actions {
      background-color: var(--o-bg-level-1) !important;
    }

    .timepicker__body {
      background-color: var(--o-bg-level-1) !important;
    }

    .timepicker-dial__control {
      outline: none;
    }
  }
}@mixin o-list-picker-theme($theme-or-color-config) {
  .o-list-picker-dialog mat-toolbar .o-list-picker-search {

    .mat-icon {
      color: var(--mat-sys-on-primary);
    }

  }
}@mixin o-table-theme($theme-or-color-config) {
  .o-table {
    .o-table-column-resizer span {
      background: color-mix(in srgb, var(--o-fg-secondary-text) 24%, transparent);
    }

    .spinner-container {
      background-color: transparent;
    }

    .o-table-menu-button {
      color: var(--o-fg-secondary-text);
    }

    .mat-mdc-table {
      .mat-mdc-checkbox-disabled:not(.mat-mdc-checkbox-checked) .mdc-checkbox__background {
        border-color: color-mix(in srgb, var(--o-fg-secondary-text) 18%, transparent);
      }

      .mat-mdc-header-row {
        .mat-mdc-header-cell {
          color: var(--o-fg-text);

          .column-filter-icon {
            color: var(--o-fg-disabled-button);
          }

          .column-filter-icon-active {
            color: var(--mat-sys-primary);
          }

          .o-table-header-indicator-numbered {
            color: var(--o-fg-secondary-text);
          }
        }
      }

      .mat-mdc-row {
        // Group-row levels use background elevation tokens (lighter → darker
        // as group depth increases). --o-bg-level-* already swaps light/dark
        // when the .o-dark class is applied at the root.
        &.o-table-group-row-level-1 {
          font-weight: 900;
          background-color: var(--o-bg-level-0);
        }

        &.o-table-group-row-level-2 {
          font-weight: 800;
          background-color: var(--o-bg-level-04);
        }

        &.o-table-group-row-level-3 {
          font-weight: 700;
          background-color: var(--o-bg-level-06);
        }

        &.o-table-group-row-level-4 {
          font-weight: 600;
          background-color: var(--o-bg-level-08);
        }

        &:hover:not(.o-table-group-row) {
          cursor: pointer;
          background-color: color-mix(in srgb, var(--o-fg-base) 10%, transparent);
        }

        &.selected {
          background: color-mix(in srgb, var(--o-fg-base) 12%, transparent);
        }

        .mat-mdc-cell {
          color: var(--o-fg-secondary-text);
        }

      }

      .mat-mdc-footer-row.o-table-aggregate {
        font-weight: bold;
        background-color: var(--o-bg-status-bar);
      }

      .mat-mdc-footer-row,
      .mat-mdc-row {

        .mat-mdc-cell,
        .mat-mdc-footer-cell {

          &.o-column-currency,
          &.o-column-integer,
          &.o-column-real {
            text-align: right;
          }

          &.o-column-action,
          &.o-column-boolean,
          &.o-column-date {
            text-align: center;
          }
        }
      }

      &.editable-row-table .mat-mdc-row,
      &.totals-table .mat-mdc-row {
        background-color: color-mix(in srgb, var(--o-bg-status-bar) 90%, transparent);
      }

      &.totals-table {
        .mat-mdc-header-row {
          display: none !important;
        }

        .mat-mdc-row {
          font-weight: bold;
        }
      }
    }

    .o-table-body.horizontal-scroll {
      &::-webkit-scrollbar-thumb {
        background-color: color-mix(in srgb, var(--mat-sys-primary) 25%, transparent);
      }

      &::-webkit-scrollbar-thumb:hover {
        background-color: color-mix(in srgb, var(--mat-sys-primary) 40%, transparent);
      }

      &::-webkit-scrollbar-thumb {
        border: 6px solid;
        border-color: var(--o-bg-background);
      }

      &::-webkit-scrollbar-thumb:hover {
        border: 4px solid;
        border-color: var(--o-bg-background);
      }
    }

  }

  .o-table-visible-columns-dialog {
    .mat-mdc-list-item.dnd-sortable-drag {
      background: var(--mat-sys-primary-container);
    }
  }


  .o-table-quickfilter .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-icon-prefix div {
    border-right: 1px solid var(--o-fg-divider);
  }
}
@mixin o-dialog-theme($theme-or-color-config) {
  // Alert-icon colours correspond to Material M2 palettes (light-blue / amber /
  // red, 500 hue). Hardcoded because they are not derived from the user theme.
  .alert-icon {
    &.info  { color: #03a9f4; }   // light-blue 500
    &.warn  { color: #ffc107; }   // amber 500
    &.error { color: #f44336; }   // red 500
  }

  .mat-mdc-dialog {
    background-color: var(--o-bg-card);

    &.mat-content-overflow {

      .mat-actions,
      mat-dialog-actions {
        border-top-color: var(--o-fg-divider);
      }
    }
  }
}// Create a theme.
@mixin o-app-layout-theme($theme) {


}
@mixin o-form-layout-split-pane-theme($theme-or-color-config) {
  .o-form-layout-split-pane {

    .spinner-container,
    .o-split-pane-secondary-content {
      background-color: var(--o-bg-background);
    }
  }
}@mixin o-form-layout-tabgroup-theme($theme-or-color-config) {
  .o-form-layout-tabgroup {
    >.spinner-container {
      background-color: var(--o-bg-background);
    }

    .mat-mdc-tab-group {

      .mdc-tab,
      .mat-mdc-tab-link {
        opacity: .75;

        &.mdc-tab--active {
          opacity: .95;
        }
      }

      &.mat-mdc-tab-group .mat-mdc-tab-body-wrapper {
        padding: 8px;
      }
    }

    .mat-mdc-tab-group.o-tab-ontimize {
      >.mat-mdc-tab-header {
        .mat-mdc-tab-label-container {
          border: none;

          .mat-mdc-tab {
            background: var(--o-bg-level-08);
            padding: 0;

            span.tab-label {
              text-overflow: clip;
              position: relative;

              span.gradient-layer {
                width: 12px;
                background: linear-gradient(to right, transparent, var(--o-bg-level-08) 100%);
                height: 100%;
                position: absolute;
                right: 0;
              }
            }

            &:not(.mdc-tab--active):not(:last-child)+.mdc-tab:not(.mdc-tab--active) {
              .mdc-tab__content .mdc-tab__text-label {
                border-left: 1px solid var(--o-fg-divider);
              }
            }

            .mdc-tab__content {
              width: 100%;

              .mdc-tab__text-label {
                padding: 0 8px;
              }
            }

            .mat-icon:hover {
              background-color: var(--o-fg-disabled-button);
              border-radius: 50%;
            }

            &.mdc-tab--active {
              background: var(--o-bg-card);

              span.tab-label span.gradient-layer {
                background: linear-gradient(to right, transparent, var(--o-bg-card) 100%);
              }

              .mat-icon:hover {
                background-color: color-mix(in srgb, var(--mat-sys-primary) 40%, transparent);
              }

              .mdc-tab__text-label {
                color: var(--o-fg-text);
              }
            }
          }

          .mdc-tab-indicator__content--underline {
            border: none;
          }
        }
      }

      >.mat-mdc-tab-body-wrapper {
        background: var(--o-bg-card);
        border-radius: 2px;
        border-top-left-radius: initial;
      }
    }
  }
}