@use '../../../libs/sistema/styles/apps-common';
@use '../../../libs/pastanaga-angular/projects/pastanaga-angular/src/styles/core';
@use 'apps/manager-v2/src/variables' as *;

:root {
  --app-background-color: $color-light-stronger;
}

.user-background {
  background-image: url('./assets/background_manager.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

nav {
  flex: 1 0 auto;
  ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      cursor: pointer;
      line-height: line-height(l);
      padding: rhythm(1) rhythm(2);
    }
  }
}

.pa-main-container {
  .pa-main-side-panel {
    background: $color-neutral-lighter;
    padding: rhythm(1) 0;
    height: calc(100vh - #{$header-height});
    overflow: auto;

    .panel-header {
      align-items: center;
      display: flex;
      gap: rhythm(1);
      padding: 0 rhythm(1);

      .title-l small {
        font-weight: $font-weight-body;
      }
    }

    nav {
      margin: rhythm(3) 0;
      ul {
        flex-direction: column;

        li {
          transition:
            background-color $transition-hint,
            color $transition-hint;

          &:hover {
            background-color: $color-neutral-light;
          }
          &.active {
            background-color: $color-neutral-light;
            font-weight: $font-weight-semi-bold;
          }

          &.child-route {
            align-items: center;
            display: flex;
            gap: rhythm(1);
            padding-left: rhythm(4);

            pa-icon {
              display: flex;
            }
          }
        }
      }
    }
  }

  .pa-main-container-wide {
    height: calc(100vh - #{$header-height});
    overflow: auto;
    padding: rhythm(2) 0;
  }

  @media (min-width: $size-viewport-wide-min) {
    .pa-main-container-wide {
      max-width: $size-viewport-wide-min;
    }
  }
}

.wide-table-container {
  margin: rhythm(2) 0;
  padding: 0 rhythm(2);
}

.table-actions {
  align-items: center;
  display: flex;
  gap: rhythm(4);
}

.filter-container {
  padding: rhythm(2) 0;
  width: rhythm(40);
}

form,
form section {
  display: flex;
  flex-direction: column;
  gap: rhythm(2);
  max-width: rhythm(64);

  label.title-xxs {
    display: block;
    margin-bottom: rhythm(1.5);
  }
  .radio-limit-container {
    align-items: center;
    display: flex;
    justify-content: space-between;
    height: rhythm(6);
  }

  .limit-container {
    align-items: center;
    display: flex;
    gap: rhythm(1);
  }

  footer {
    display: flex;
    gap: rhythm(2);
    padding: rhythm(3) 0;
  }
}

form section {
  margin-bottom: rhythm(3);
  h3 {
    margin-bottom: 0;
  }
}
