.user-rights-header {
  margin-bottom: 24px;

  .page-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
  }

  .page-subtitle {
    color: #6b7280;
    margin-bottom: 16px;
  }

  .back-button {
    background: none;
    border: none;
    color: #3b82f6;
    cursor: pointer;
    padding: 8px 0;
    font-size: 14px;

    .back-icon {
      margin-right: 4px;
    }

    &:hover {
      text-decoration: underline;
    }
  }
}

.user-role-section {
  display: flex;
  gap: 16px;

  .form-field,
  .role-display {
    flex: 1;
  }
}

.hierarchy-section {
  background: #ffffff;
  border-radius: 8px;

  .hierarchy-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;

    .hierarchy-title {
      font-size: 18px;
      font-weight: 600;
    }

    .hierarchy-actions {
      display: flex;
      gap: 16px;

      .btn-text {
        background-color: var(--action-primary-default);
        color: #ffffff;
        border: none;
        box-shadow: -1px 2px 2px 0px #00000026;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        margin-right: 16px;
        padding: 0 12px;
        min-height: 40px;
        border-radius: 8px;
        font-size: 14px;
        cursor: pointer;
        white-space: nowrap;
      }
    }
  }
}

// Fixed header - no scroll
.permissions-grid-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr 80px 80px 80px 80px 80px 200px;
  gap: 16px;
  align-items: center;
  padding: 12px 16px;
  background: var(--bg-surface);
  border-radius: 4px;
  margin-bottom: 0;

  .permission-columns {
    display: contents;

    .permission-label {
      font-size: 16px;
      color: rgba(26, 26, 26, 0.87);
      font-weight: 700;
      text-align: center;
      font-family: "Helvetica" !important;
    }
  }
}

// Scrollable wrapper for tree
.transaction-tree-wrapper {
  max-height: calc(100vh - 400px);
  overflow-y: auto;
  overflow-x: hidden;

  &.scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--action-primary-default, #834dd0) rgba(26, 26, 26, .32);

    &::-webkit-scrollbar {
      width: 8px;
    }

    &::-webkit-scrollbar-track {
      background: rgba(26, 26, 26, .32);
      border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background: var(--action-primary-default, #834dd0);
      border-radius: 4px;

      &:hover {
        background: var(--action-primary-default-dark, #6b3ab0);
      }
    }
  }
}

.transaction-tree {
  .tree-node {
    display: grid;
    grid-template-columns: 1fr 80px 80px 80px 80px 80px 200px;
    gap: 16px;
    align-items: center;
    padding: 16px;
    background: var(--mat-sys-background);
    border-bottom: 0.5px solid #ADADAD70;
    min-height: 48px;

    &.child-node {
      padding-left: 56px;
      background: #fafbfc;

      &:hover {
        background: #f3f4f6;
      }
    }

    .node-content {
      display: flex;
      align-items: center;
      gap: 12px;

      .expand-toggle {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #6b7280;

        mat-icon {
          display: inline-flex;
          transition: transform 0.2s ease;
          font-size: 24px;
          width: 20px;
          height: 20px;

          &.expanded {
            transform: rotate(90deg);
          }
        }

        &:hover {
          color: #374151;
        }
      }

      .node-code {
        font-family: "Helvetica" !important;
        padding: 4px 10px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 400;
        color: rgba(26, 26, 26, 0.87);
        white-space: nowrap;
      }

      .node-name {
        font-size: 12px;
        font-weight: 700;
        font-family: Helvetica !important;
        color: #1A1A1ADE;
      }

      .assigned-badge {
        background: #dbeafe;
        color: #1e40af;
        padding: 3px 12px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 500;
        margin-left: 12px;
        white-space: nowrap;
      }
    }

    .node-permissions {
      display: contents;

      .checkbox-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        input[type="checkbox"] {
          width: 18px;
          height: 18px;
          cursor: pointer;
          appearance: none;
          -webkit-appearance: none;
          -moz-appearance: none;
          border-radius: 4px;
          background-color: rgba(0, 0, 0, 0);
          border-color: var(--mat-sys-inverse-surface) !important;
          border: 1px solid var(--action-primary-default);
          position: relative;
          transition: all 0.2s ease;

          &:checked {
            background-color: var(--action-primary-default);

            &::after {
              content: '✓';
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              color: #fff;
              font-size: 14px;
              font-weight: bold;
            }
          }

          &:disabled {
            opacity: 0.5;
            cursor: not-allowed;
          }
        }
      }

      .action-buttons {
        display: flex;
        gap: 8px;
        justify-content: flex-start;

        .btn-action {
          background-color: var(--action-primary-default);
          color: #ffffff;
          border: none;
          box-shadow: -1px 2px 2px 0px #00000026;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          margin-right: 16px;
          padding: 0 12px;
          min-height: 40px;
          border-radius: 8px;
          font-size: 14px;
          cursor: pointer;
          white-space: nowrap;

          &.btn-select {
            color: #ffffff;
            border-color: var(--action-primary-default);


          }

          &.btn-deselect {
            color: #ffffff;
            border-color: #dc2626;


          }
        }
      }
    }
  }
}

.checkbox-wrapper input:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.btn-action:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  background-color: #e0e0e0;
  color: #999;
}

.btn-text:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  color: #999;
}

.FormOverView {
  padding: 24px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;

  &.scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--action-primary-default, #834dd0) rgba(26, 26, 26, .32);

    &::-webkit-scrollbar {
      width: 8px;
    }

    &::-webkit-scrollbar-track {
      background: rgba(26, 26, 26, .32);
      border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background: var(--action-primary-default, #834dd0);
      border-radius: 4px;

      &:hover {
        background: var(--action-primary-default-dark, #6b3ab0);
      }
    }
  }
}

@media (max-width: 768px) {

  :host {
    display: block !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .FormOverView {
    padding: 16px 12px !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Stack picklist vertically — applies to ALL screens ≤768px */
  .user-role-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .user-role-section > div {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* gb-newpicklist outside div (the ModuleName one) */
  .user-role-section > gb-newpicklist {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  ::ng-deep gb-newpicklist {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* KEY FIX: override Angular Material's inline width:360px */
  ::ng-deep gb-newpicklist .mat-mdc-text-field-wrapper,
  ::ng-deep gb-newpicklist .mdc-text-field,
  ::ng-deep gb-newpicklist .mat-mdc-form-field,
  ::ng-deep gb-newpicklist .mat-mdc-form-field-flex,
  ::ng-deep gb-newpicklist .mat-mdc-form-field-infix,
  ::ng-deep gb-newpicklist .mdc-text-field--filled,
  ::ng-deep gb-newpicklist .mdc-text-field--no-label {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Input stretches to fill */
  ::ng-deep gb-newpicklist input.mat-mdc-input-element,
  ::ng-deep gb-newpicklist input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
  }

  /* Arrow icon — fixed, never shrink */
  ::ng-deep gb-newpicklist mat-icon {
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    overflow: visible !important;
    box-sizing: content-box !important;
  }

  /* Suffix wrapper holding the arrow */
  ::ng-deep gb-newpicklist .mat-mdc-form-field-icon-suffix,
  ::ng-deep gb-newpicklist [matsuffix] {
    flex-shrink: 0 !important;
    width: auto !important;
    padding-right: 8px !important;
    overflow: visible !important;
  }

  /* gb-formaction top toolbar */
  ::ng-deep gb-formaction {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box !important;
  }

  /* Hierarchy header buttons — wrap */
  .hierarchy-section .hierarchy-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }

  .hierarchy-section .hierarchy-header .hierarchy-actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .hierarchy-section .hierarchy-header .hierarchy-actions .btn-text {
    margin-right: 0 !important;
    min-height: 36px !important;
    font-size: 13px !important;
    padding: 0 12px !important;
  }

  /* Tree grid — horizontal scroll */
  .hierarchy-section {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .permissions-grid-header,
  .transaction-tree .tree-node {
    min-width: 700px;
  }

  .transaction-tree-wrapper {
    overflow-x: auto !important;
    overflow-y: auto !important;
  }

  .transaction-tree .tree-node.child-node {
    padding-left: 32px !important;
  }
}


@media (min-width: 769px) and (max-width:1024px){

  :host {
    display: block !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .FormOverView {
    padding: 16px 12px !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Stack picklist vertically — applies to ALL screens ≤768px */
  .user-role-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .user-role-section > div {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* gb-newpicklist outside div (the ModuleName one) */
  .user-role-section > gb-newpicklist {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  ::ng-deep gb-newpicklist {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* KEY FIX: override Angular Material's inline width:360px */
  ::ng-deep gb-newpicklist .mat-mdc-text-field-wrapper,
  ::ng-deep gb-newpicklist .mdc-text-field,
  ::ng-deep gb-newpicklist .mat-mdc-form-field,
  ::ng-deep gb-newpicklist .mat-mdc-form-field-flex,
  ::ng-deep gb-newpicklist .mat-mdc-form-field-infix,
  ::ng-deep gb-newpicklist .mdc-text-field--filled,
  ::ng-deep gb-newpicklist .mdc-text-field--no-label {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Input stretches to fill */
  ::ng-deep gb-newpicklist input.mat-mdc-input-element,
  ::ng-deep gb-newpicklist input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
  }

  /* Arrow icon — fixed, never shrink */
  ::ng-deep gb-newpicklist mat-icon {
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    overflow: visible !important;
    box-sizing: content-box !important;
  }

  /* Suffix wrapper holding the arrow */
  ::ng-deep gb-newpicklist .mat-mdc-form-field-icon-suffix,
  ::ng-deep gb-newpicklist [matsuffix] {
    flex-shrink: 0 !important;
    width: auto !important;
    padding-right: 8px !important;
    overflow: visible !important;
  }

  /* gb-formaction top toolbar */
  ::ng-deep gb-formaction {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box !important;
  }

  /* Hierarchy header buttons — wrap */
  .hierarchy-section .hierarchy-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }

  .hierarchy-section .hierarchy-header .hierarchy-actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .hierarchy-section .hierarchy-header .hierarchy-actions .btn-text {
    margin-right: 0 !important;
    min-height: 36px !important;
    font-size: 13px !important;
    padding: 0 12px !important;
  }

  /* Tree grid — horizontal scroll */
  .hierarchy-section {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .permissions-grid-header,
  .transaction-tree .tree-node {
    min-width: 700px;
  }

  .transaction-tree-wrapper {
    overflow-x: auto !important;
    overflow-y: auto !important;
  }

  .transaction-tree .tree-node.child-node {
    padding-left: 32px !important;
  }
}

/* ── Small mobile only: extra tightening for 360–400px ── */
@media (max-width: 400px) {

  .FormOverView {
    padding: 10px 8px !important;
  }

  .user-role-section {
    gap: 8px !important;
  }

  .user-rights-header .page-title {
    font-size: 20px !important;
  }

  .user-rights-header .page-subtitle {
    font-size: 13px !important;
  }

  .hierarchy-section .hierarchy-header .hierarchy-actions .btn-text {
    font-size: 12px !important;
    padding: 0 10px !important;
    min-height: 34px !important;
  }
}